I want to make textbox numeric only in my Angular JS application.
Here is my code-
script.js
app.directive('numbersonly', function () {
return {
restrict: 'A',
link: function (scope, elm, attrs, ctrl) {
elm.on('keydown', function (event) {
if (event.which == 64 || event.which == 16) {
// to allow numbers
return false;
} else if (event.which >= 48 && event.which <= 57) {
// to allow numbers
return true;
} else if (event.which >= 96 && event.which <= 105) {
// to allow numpad number
return true;
} else if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {
// to allow backspace, enter, escape, arrows
return true;
} else {
event.preventDefault();
// to stop others
return false;
}
});
}
}
});
And on UI-
<input type="text" id="txtEmpAge" data-ng-model="newemployee.Age" class="form-control" numbersonly required />
But the text box is accepting both numeric and character.
If it is not necessary to use your own implementation, try Angular's number type input.
You can use type=number
<input type="number" id="txtEmpAge" data-ng-model="newemployee.Age" class="form-control" required />
This will take only number values in the text box.
in my opinion, best way to achieve
, it will also not allow user to copy paste strings to input
<input type="number" onkeypress='return event.charCode >= 48 && event.charCode <= 57'></input>
Use the following snippet to make the input field to accept only characters between 0 to 9. This will eliminate the decimal pointer.
<input type="number" onkeypress="return isNumKey(event)"/>
use this function to trigger on key is pressed.
function isNumKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
Related
I have a input box which should not allow negative decimal value and 0 trying to do using charcode as shown below
<input type="number" min="1" name="minValue"
className="input-box removeNumberArrow" value={this.state.minValue}
onChange={this.handleMinChange} onKeyPress={this.validateEntredVal}/>
Below method is called when ever a key is pressed
validateEntredVal = (event) => {
let charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode > 31 && (charCode <48 || charCode > 57)) && charCode !== 46) {
evt.preventDefault();
} else {
return true;
}
};
Using the above method it will not allow the characters and negative values. problem it should not allow 0 and decimal as well (means the text box value should always accept value greater than zero)
Please help on the same
min="1" is not working
Add min="0" attribute in min tag.
I have to restrict a input field to accept only numbers. We are not using "lightning-input".
How to use below js function in Lightning web component?
function isNumber(evt) {
var iKeyCode = (evt.which) ? evt.which : evt.keyCode
if (iKeyCode != 46 && iKeyCode > 31 && (iKeyCode < 48 || iKeyCode > 57))
return false;
return true;
}
See below:
.html file
<lightning-card>
<div class="slds-m-around_medium">
<input type="number" onkeypress={handleKeyPress} pattern="[0-9]" class="slds-input" />
</div>
</lightning-card>
.js file
handleKeyPress(event) {
let input_number = event.target.value;
console.log('Number: '+input_number);
}
Results/output
I believe it allows "e" & "k" as valid numbers,
here's what I did
.html file
<input class="numfield" onkeydown={onlyNumericAllowed} type="number" >
.js file
onlyNumericAllowed(event) {
if(event.keyCode === 69){
event.preventDefault();
}
const value = event.target.value;
console.log(event.charCode);
if (value && (!/^[0-9]+$/.test(value) || event.keyCode == 0)) {
this.template.querySelector('.numfield').value = value.replace(/\D/g, '');
}
}
I'm trying to prevent some characters from being entered, but for some reason the ban does not happen. Where was I wrong?
render () {
return <form>
<input
id="username"
type="text"
placeholder="Username"
value={this.state.value}
onKeyPress={this.pale_username.bind(this)}
/>
</form>
}
and function
pale_username(key) {
if((key.charCode < 48 || key.charCode > 57) //numbers
&& (key.charCode < 65 || key.charCode > 90) // AB
&& (key.charCode < 97 || key.charCode > 122) // ab
&& (key.charCode !== 36) // $
&& (key.charCode !== 38) // &
&& (key.charCode < 40 || key.charCode > 41) // ()
&& (key.charCode < 45 || key.charCode > 46) // -.
&& (key.charCode !== 95) // _
&& (key.charCode !== 127) // del
&& (key.charCode !== 8) // BackSpace
&& (key.charCode !== 46))
return false;
}
I would handle the character 'ban' in an onChange handler. One reason is, what happens if someone copy and pastes something into your input? Preventing the input in a keyboard event handler will not work.
I would try something like this:
handleChange(e) {
// Use whatever regex you need.
const filteredInput = e.target.value.replace(/[abAB$&()-_.*]|\d+/g, '');
this.setState(value: filteredInput)
}
And then use it in your input.
<input
id="username"
type="text"
placeholder="Username"
value={this.state.value}
onChange={this.handleChange.bind(this)}
/>
onKeyDown detects charCode and onKeyPress detects keyCode. Try change it for onKeyDown
I just want to restrict user to input only 10 digits in a mobile number field.
I have tried this code
app.directive('allowOnlyNumbers', function () {
return {
restrict: 'A',
link: function (scope, elm, attrs, ctrl) {
elm.on('keydown', function (event) {
if (event.which == 64 || event.which == 16) {
// to allow numbers
return false;
} else if (event.which >= 48 && event.which <= 57) {
// to allow numbers
return true;
} else if (event.which >= 96 && event.which <= 105) {
// to allow numpad number
return true;
} else if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {
// to allow backspace, enter, escape, arrows
return true;
} else {
event.preventDefault();
// to stop others
return false;
}
});
}
}
});
This code allow users to input the numbers but it's taking more than 10 digits.
can anyone tell me how to restrict ofr only 10 digits only?
Any help will be appreciated.
Thanks in advance....
You could also try using ng-pattern:
<input type="text" class="form-control" ng-model="sample"
ng-pattern="/^[0-9]{10}$/">
This would require exactly 10 digits, and nothing else, for validation to pass. If you instead require a maximum of 10 digits, but fewer digits than this also acceptable, then you could use ^[0-9]{1,10}.
Just use maxlength attribute without directive
<input type="text" class="form-control" ng-model="sample" maxlength="10">
EDIT
Change it to type="number" if you want to have only numbers,
<input type="number" class="form-control" ng-model="sample" maxlength="10">
I want to my textbox to only allow numbers and also have a character limit on it.
Currently, I have the numbers working... Now I am having issues figuring out how to limit the characters.
Here is what I have...
JS:
app.directive('numbersonly', function () {
return {
restrict: 'A',
link: function (scope, elm, attrs, ctrl) {
elm.on('keydown', function (event) {
if (event.which == 64 || event.which == 16 && elm.val().length > 4) {
return false;
} else if (event.which >= 48 && event.which <= 57) {
return true;
} else if (event.which >= 96 && event.which <= 105) {
return true;
} else if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1 && elm.val().length > 4) {
return true;
} else {
event.preventDefault();
return false;
}
});
}
}
});
Markup:
<input type="text" id="txtEmpAge" data-ng-model="newemployee.Age" class="form-control" numbersonly required />
In html input attribute length. we can use it in multiple forms:
Length, Minlength and maxlength
Try this
maxlength="5"
I had the same issue and wrote a directive to figure it all out. Then I found a plug in called angular-dynamic-number and it worked for me right out the box. I would suggest you use that if it meets your need.
https://www.npmjs.com/package/angular-dynamic-number