not allowing unwanted characters to input in a field

Question

not allowing unwanted characters to input in a field

I have a text field and i only want to input numbers in it. I used type ="number" but i have a problem because i cannot get the decimal point. SO i've used a directive found online to restrict letters from input.

app.directive('onlyNum', function() {
        return function(scope, element, attrs) {

            var keyCode = [8,9,37,39,48,49,50,51,52,53,54,55,56,57,110];
            element.bind("keydown", function(event) {
                console.log($.inArray(event.which,keyCode));
                if($.inArray(event.which,keyCode) == -1) {
                    scope.$apply(function(){
                        scope.$eval(attrs.onlyNum);
                        event.preventDefault();
                    });
                    event.preventDefault();
                }

            });
        };
    })

It works fine but i can enter characters such as @,$,!,# ,& and so on.How can i restrict these characters from input also.

javascript
html
angularjs
ionic-framework

Answer 1

The keyCode array contains the ASCII codes of all unwanted characters. You can add own numbers there, you can get them from an ascii chart. For example @ = 64, $ = 36. Be aware that most ASCII charts only give you the hexadecimal value, but the array contains decimal numbers.

EDIT: This chart also contains decimal numbers:

Answer 2

You can listen for the input event on your element and look if the last entered char is allowed by defining an array of allowed characters and check the index. If the character is not allowed, delete it:

var element = document.getElementById("inputfield");
var inputText = "";
var allowedInputs = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.'];
    element.oninput = function (event) {
    if(allowedInputs.indexOf(element.value.slice(event.srcElement.selectionEnd - 1, event.srcElement.selectionEnd)) == -1)
        element.value = element.value.substr(0, event.srcElement.selectionEnd - 1) + element.value.substr(event.srcElement.selectionEnd);
};

<input id="inputfield"/>

working fiddle

You can add all characters you want to allow to the array.

EDIT: I updated the code, so no unallowed characters can be entered in between the existing characters.

Answer 3

That's my custom directive that can be easily adjusted with RegEx to fit any need

http://plnkr.co/edit/dgRJkVeX6iwIbXuoMVSW?p=preview

.directive("numberValidation", function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, ele, attrs, ctrl) {
      ctrl.$parsers.unshift(function(value) {
        if (value) {
          var valid = value.match(/^\d+(,\d+)?$/)
          ctrl.$setValidity('invalidNumber', valid);
        }
        return valid ? value : undefined;
      });

    }
  }
});