angularjs - Prevent the letter 'e' and dots from being typed in an input number

Question

I have a simple input number like this:

<input type="number"/>

When trying to input anything other than a number or the letter "e", it doesn't work, but when I type the letter "e" it works.

I checked w3.org specs, and it states clearly that floating numbers can be typed using the normal notation (ex : 10.2) or the scientific notation (ex : 1e2).

So my question is : Is there a way to prevent the user from typing e letters and dots. Said in another way : Is there a way to make the input number accept ONLY INTEGER NUMBERS ?

I have the idea of doing that with an Angular directive that I will input as an attribute to my input number, but I really don't know how to make that work.

EDIT : What I would like to do is to simulate the same behaviour that we have now when trying to type any other letter in the alphabet other than "e", or ".". What I want to say is that I do not want to see the letter appearing in the input (Like it is the case now).

Answer 1

You are correct that it should be done with a directive. Simply create a directive and attach it to the input. This directive should listen for keypress and/or keydown events. Possibly paste events as well. If the char entered is an 'e' or dot -- call event.preventDefault();

angular.module('app', [])
  .directive('yrInteger', yrInteger);

function yrInteger() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
    
      element.on('keypress', function(event) {

        if ( !isIntegerChar() ) 
          event.preventDefault();
        
        function isIntegerChar() {
          return /[0-9]|-/.test(
            String.fromCharCode(event.which))
        }

      })       
    
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <input 
         type="number" 
         yr-integer
         />
</div>