Restrict Exponents and periods(.) in numeric textbox html

Question

I have a numeric textbox, by default numeric textbox allows Exponents and periods. How do i restrict that?

One of the method i can think of is using string.replace on input event however it is not working as expected. Below is my code..

HTML

     <input type='number' class='number'>

JavaScript

     $(".number").on('input', function () {
            this.value = this.value.replace(/e|E|\./g, ''); // Remove e, E, and period(.)
            if (this.value.length > 4) {
                this.value = this.value.slice(0, 4);
            }
        });

When i enter string '2e' in textbox, entire input is getting removed if above code is ran. i just wants to remove e, E or period from input string not entire input.

Is there a way to achieve this.

JSfiddle

Answer BY nichel is working like a charm, now my problem is how do i restrict the same in PASTE event.?

nicael · Accepted Answer · 2016-08-01T08:02:11.963

0

So basically you want to allow just numbers? Then restrict the keys by keycode & remove excess chars on paste

$(".number").keypress(function(e){
   return e.keyCode>47&&e.keyCode<58;
}).paste(function(){
   $(this).val($(this).val().replace(/\D/g,''));
})

And since you'd like the max length to be 4, just add max="9999":

<input type='number' class='number' max="9999">

edited Aug 01 '16 at 08:02

answered Jul 29 '16 at 07:26

nicael

18,550
13
57
90

_since you'd like the max length to be 5_ OP wants **4** – Tushar Jul 29 '16 at 07:36
@Tushar Oh, I noticed `.slice(0, 4)` and thought wrongly. Indeed. – nicael Jul 29 '16 at 08:00

score 0 · Answer 2 · edited May 23 '17 at 12:32

input[type=number] returns ""(blank string) if input value is not valid.

You can refer this post for more information.

I would suggest you to use input[type=tel] instead. It also has a maxLength attribute so you so not have to worry about trimming extra values.

You can even replace your regex to /[^0-9]/. This will replace all characters except numbers.

Sample Fiddle.

So you final code would look like: JSFiddle

Restrict Exponents and periods(.) in numeric textbox html

2 Answers2