Unable to set only numbers input [duplicate]

Question

I am trying to set up an input which can accept only numbers, but still can put letter in it, why ?

               <input type="number"
                      pattern="[0-9]"
                      ng-model="slip.risk"
                      class="form-control"
                      placeholder="Risk"
                      ng-change="riskWinCalculations(slip, 'RISK')">

this is for an Angularjs app, so I don't know if this is the issue or what.

see this: stackoverflow.com/questions/16091218/… AND stackoverflow.com/questions/21432677/… — The Guest
– The Guest, Commented May 5, 2015 at 17:37
You can check github.com/rajesh38/ng-only-number 1. It restricts input to only numbers and decimal point in a textbox while typing. 2. You can limit the number of digits to be allowed before and after the decimal point 3. It also trims the digits after the decimal point if the decimal point is removed from the textbox e.g. if you have put 123.45 and then remove the decimal point it will also remove the trailing digits after the decimal point and make it 123. — Rajesh Paul
– Rajesh Paul, Commented Dec 25, 2015 at 19:31

officert · Accepted Answer · 2015-05-06 13:10:39Z

2

pattern will not prevent characters from being typed into the input element, it will only set off validation.

To prevent non numeric characters from being entered you can use a directive that intercepts the value being typed.

angular.module('components', []).directive('numbersOnly', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            ngModelCtrl.$parsers.push(function (inputValue) {
                var transformedInput = inputValue.replace(/\.\.+/g, '.');
                ngModelCtrl.$setViewValue(transformedInput);
                ngModelCtrl.$render();

                return inputValue;
            });
        }
    }
});

Here's a JsFiddle of the working directive

edited May 6, 2015 at 13:10

answered May 5, 2015 at 18:01

officert

1,2329 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Non Over a year ago

Hey, just one more question, I need that the user be able to enter ".", like 156.152. so ?

officert Over a year ago

I updated the regex to allow decimals, though it will allow multiple decimals in a row

Charles Over a year ago

Use transformedInput = inputValue.replace(/\.\.+/g, '.'); to remove redundant periods.

officert Over a year ago

thanks @Charles. I updated the JsFiddle and my answer with your suggestion.

Collectives™ on Stack Overflow

Unable to set only numbers input [duplicate]

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related