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).

Possible duplicate. Please refer to: http://stackoverflow.com/questions/19966417/prevent-typing-non-numeric-in-input-type-number?rq=1 — Riaan van Zyl, Jul 07 '16 at 09:26
All the hacks that I found there do not simulate the same behaviour that we have currently with input number when typing any other letter than "e". — Mathemagician, Jul 07 '16 at 09:42
Have you found what you wanted in the answer ? If yes, please mark the one you need as the answer — Weedoze, Jul 07 '16 at 11:40

Martin · Accepted Answer · 2016-07-07T15:04:01.817

9

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>

edited Jul 07 '16 at 15:04

answered Jul 07 '16 at 10:02

Martin

15,820
4
47
56

1

If i copy and paste it is still allowing e – H Varma Dec 12 '16 at 11:34
1

Can you provide a plunkr or some other reproducible example? – Martin Dec 12 '16 at 11:54
1

U just copy some text which is having e in it and paste that – H Varma Dec 12 '16 at 12:05
Oh I see. The specific question/answer has to do with typed input. That said, adding the paste event might work. – Martin Dec 12 '16 at 13:38
I want to know one thing.WIll the use of directives have any impact on performance? – H Varma Dec 12 '16 at 16:24
Great. There are a lot of good performance testing tools out there. – Martin Dec 12 '16 at 18:34

score 0 · Answer 2 · edited Jul 07 '16 at 11:32

0

You can simply use ng-pattern on your input

Controller

$scope.onlyDigits= /^\d+$/;

HTML

<input ng-pattern="onlyDigits" type="number" />

This pattern use \d which is for any numeric value

edited Jul 07 '16 at 11:32

Aaron

24,009
2
33
57

answered Jul 07 '16 at 10:50

Weedoze

13,683
1
33
63

This pattern will allow whole numbers, not integers. Integers all whole numbers and the negative counterparts of those numbers. – Martin Jul 07 '16 at 11:52
http://www.w3schools.com/jsref/jsref_regexp_digit.asp --> The \d metacharacter is used to find a digit from 0-9. – Weedoze Jul 07 '16 at 11:56
Yep. `\d` is the same as `[0-9]`. Neither of these match all integers. -1 is a valid integer, `/^\d+$/.test('-1')` returns `false`. – Martin Jul 07 '16 at 12:09

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

2 Answers2

Linked

Related