Stop the user from entering anything other than numbers

Question

Stop the user from entering anything other than numbers

I am working on a directive to only allow users to input numbers. Check out my implementation below.

Snippet from my directive template:

<input type="text" maxlength="5" ng-keypress="allowNumbers($event)">

Function in my directive:

$scope.allowNumbers= function (ev) {
    var key = ev.charCode || ev.keyCode || 0;
    var allowed = (
        key == 8 ||
        key == 9 ||
        key == 13 ||
        key == 46 ||
        key == 110 ||
        key == 190 ||
        (key >= 35 && key <= 40) ||
        (key >= 48 && key <= 57) ||
        (key >= 96 && key <= 105));

    return allowed;
};

During my debugging process, I encountered an issue where the value in the textbox was still being entered even if the function returned either true or false. Is there a way to prevent non-number key presses from being entered?

javascript angularjs

Answer 1

Answer №1

If you need to restrict input to numbers only, you can implement a directive in Angular:

angular.module('myApp', []).directive('numbersOnly', function(){
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, modelCtrl) {
            modelCtrl.$parsers.push(function (inputValue) {
                if (!inputValue) return ''
                var transformedInput = inputValue.replace(/[^0-9]/g, '');
                if (transformedInput !== inputValue) {
                    modelCtrl.$setViewValue(transformedInput);
                    modelCtrl.$render();
                }

                return transformedInput;
            });
        }
    };
});

Then you can use this directive in your input fields like this:

<input type="text" maxlength="5" numbers-only/>

By adding the numbers-only attribute, you can easily apply this behavior to any input field that requires it.

For a demonstration, you can check out this JSFiddle example.

Answer 2

If you need to restrict input to numbers only, you can implement a directive in Angular:

angular.module('myApp', []).directive('numbersOnly', function(){
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, modelCtrl) {
            modelCtrl.$parsers.push(function (inputValue) {
                if (!inputValue) return ''
                var transformedInput = inputValue.replace(/[^0-9]/g, '');
                if (transformedInput !== inputValue) {
                    modelCtrl.$setViewValue(transformedInput);
                    modelCtrl.$render();
                }

                return transformedInput;
            });
        }
    };
});

Then you can use this directive in your input fields like this:

<input type="text" maxlength="5" numbers-only/>

By adding the numbers-only attribute, you can easily apply this behavior to any input field that requires it.

For a demonstration, you can check out this JSFiddle example.

Answer 3

Answer №2

To simplify this process and ensure compatibility with various forms of input (such as copy-paste), I would recommend the following approach:

<input type="number" ng-model="myNumber">

$scope.$watch('myNumber', function (input) {
    $scope.myNumber = input.replace(/\D/g, '');
});

Answer 4

To simplify this process and ensure compatibility with various forms of input (such as copy-paste), I would recommend the following approach:

<input type="number" ng-model="myNumber">

$scope.$watch('myNumber', function (input) {
    $scope.myNumber = input.replace(/\D/g, '');
});

Answer 5

Answer №3

    function CheckIfNumeric(event) {

var keyVal = event.keyCode == 0 ? event.charCode : event.keyCode;
var result = ((keyVal >= 48 && keyVal <= 57) || (specialKeys.indexOf(event.keyCode) != -1 && event.charCode != event.keyCode));
//  document.getElementById("error").style.display = result ? "none" : "inline";
return result;
}

Also in html

     <input type="text" onkeypress="return CheckIfNumeric(event);" />

Answer 6

    function CheckIfNumeric(event) {

var keyVal = event.keyCode == 0 ? event.charCode : event.keyCode;
var result = ((keyVal >= 48 && keyVal <= 57) || (specialKeys.indexOf(event.keyCode) != -1 && event.charCode != event.keyCode));
//  document.getElementById("error").style.display = result ? "none" : "inline";
return result;
}

Also in html

     <input type="text" onkeypress="return CheckIfNumeric(event);" />

Stop the user from entering anything other than numbers

Answer №1

Answer №2

Answer №3

Similar questions

Tips on sending arguments to functions associated with ...mapActions...()?

The system encountered an error due to the absence of a defined Google or a MissingKeyMapError from the

Is there a way to have one element automatically expand when another is selected?

`How can the background color be altered based on specific conditions?`

BufferGeometry is not being displayed

Is there a way to retrieve a different value within the JavaScript code (imagepicker)?

What is the best way to utilize useClient in the code of my Next.js project?

Tips for validating a session on a React client following a successful authentication via an Express session

React - Component not updating after Axios call in separate file

Is there a method in JavaScript/jQuery to gently push or flick the scroll so that it can be easily interrupted by the user? Further details are provided below

ways to retrieve script template variable in angularjs application

What could be the reason why readyState is not equal to 4?

Mandatory input Angularjs 1.2 and Bootstrap 3

What is the best way to implement a loading cursor when the Submit button is clicked?

The array containing numbers or undefined values cannot be assigned to an array containing only numbers

Utilize React Hook Form to easily reset the value of an MUI Select component

Function utilizing variables parsed by Angular directive

Creating a tailored regular expression for validating email addresses

What is the most efficient way to establish a connection to "host:port" without relying on a web browser, utilizing only Node.js/JavaScript?

I keep encountering the following issue: "It seems that the file requested at /images/crown.png is not recognized as a valid image, as it was received as text/html; charset=utf-8."