I need an input field that allows (and display) only numeric character as input. I need that this value will be integer so neither '.' character is allowed. How to do this in angularjs? If possible, how also display only numbers if a string is pasted in the text field? Edit: the type=number allows the dot, I want allow only integer
2
-
<input type="number"> you can set different html params that define only full numbers can be set. look in the html5 docsmtizziani– mtizziani2017-03-19 19:44:17 +00:00Commented Mar 19, 2017 at 19:44
-
Possible duplicate of How do I restrict an input to only accept numbers?Nikolaj Dam Larsen– Nikolaj Dam Larsen2017-03-19 20:01:49 +00:00Commented Mar 19, 2017 at 20:01
Add a comment
|
6 Answers
Try this it will work as per your expectation.
var numInput = document.querySelector('input');
numInput.addEventListener('input', function(){
var num = this.value.match(/^\d+$/);
if (num === null) {
this.value = "";
}
});<input type="number" min="0" step="1"/>
Comments
Look at <input type="number"> https://www.w3schools.com/html/html_form_input_types.asp
Otherwise you need to create your own logic to handle user input. In case you don't want to use HTML5 input then here is my suggestion.
In your angular2 component, create
<input [ngModel]="your_variable` (ngModelChange)="changeEvent($event)") />
changeEvent = (event) => {
//logic to handle different formats of your_variable
}
Comments
You can use ng-pattern="/^[0-9]{1,}$/" and Input type "text" to allow only numbers.
Comments
You can do it simply with HTML without using any angular methods, like this
<input type="number" min="0" step="1"/>Another method using also HTML is to use pattern attribute
<input type="text" pattern="\d*" />
You can use ng-pattern="/^[0-9]\d*$/" for that textbox but type should be text for that and You can also use below code for check only for number.
<input type="number" min="0"/>
Comments
**Directive: (with input type=text)**
app.directive('onlyNumbers', function () {
return {
restrict: 'A',
link: function (scope, elm, attrs, ctrl) {
elm.on('keydown', function (event) {
if(event.shiftKey){event.preventDefault(); return false;}
//console.log(event.which);
if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {
// backspace, enter, escape, arrows
return true;
} else if (event.which >= 48 && event.which <= 57) {
// numbers 0 to 9
return true;
} else if (event.which >= 96 && event.which <= 105) {
// numpad number
return true;
}
// else if ([110, 190].indexOf(event.which) > -1) {
// // dot and numpad dot
// return true;
// }
else {
event.preventDefault();
return false;
}
});
}
}
});
**HTML:**
<input type="text" only-numbers>
