Set an input field to accept only numbers with jQuery

Question

I have to define an input text which accepts only integer numbers.

I tried with a regular expressions but the decimal part of the value is still visible.

I used this function:

$(document).on("input","input", function(e) {
    this.value = this.value.replace(/[^\d\\-]/g,'');
})

but it is also accepting decimal(.) in input, I didn't required (.) in input. — durga
– durga, Commented Oct 26, 2016 at 7:58
Possible duplicate of How to allow only numeric (0-9) in HTML inputbox using jQuery? — emkey08
– emkey08, Commented Jul 18, 2019 at 8:11

Sean W · Accepted Answer · 2016-10-26 09:54:08Z

3

How about this one?

$('input').on('input blur paste', function(){
 $(this).val($(this).val().replace(/\D/g, ''))
})

<input>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

answered Oct 26, 2016 at 9:54

Sean W

5977 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AHJeebon · Accepted Answer · 2016-10-26 08:04:01Z

1

Simple and easy to use. Try it: edited: also call in onblur event to prevent paste.

function numOnly(selector){
  selector.value = selector.value.replace(/[^0-9]/g,'');
}

<input type="text" onkeyup="numOnly(this)" onblur="numOnly(this)">

edited Oct 26, 2016 at 8:04

answered Oct 26, 2016 at 7:58

AHJeebon

1,2481 gold badge12 silver badges17 bronze badges

2 Comments

Reinstate Monica Cellio Over a year ago

Right-click and paste doesn't trigger keyup.

AHJeebon Over a year ago

Thank you @Archer, i didn't think about before. Now it is fixed. Check it now.

Community · Accepted Answer · 2017-05-23 11:46:31Z

You can detect on keydown if is numeric and you can check on paste event if is numeric and remove all non-numeric. This remove dot too.

Original source : keydown detect : Paste remove

This code below has been modified from the original source.

Please try:

$( "#input" ).on("paste", function() {  
    setTimeout(function(){
    if ($('#input').val() != $('#input').val().replace(/\D/g,"")) 
    { 
      $('#input').val($('#input').val().replace(/\D/g,""));
    }
    },10)
});

$('#firstrow').on('keydown', '#input', function(e){-1!==$.inArray(e.keyCode,[46,8,9,27,13])||/65|67|86|88/.test(e.keyCode)&&(!0===e.ctrlKey||!0===e.metaKey)||35<=e.keyCode&&40>=e.keyCode||(e.shiftKey||48>e.keyCode||57<e.keyCode)&&(96>e.keyCode||105<e.keyCode)&&e.preventDefault()});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstrow">
  <input id="input" type="text">
</div>

durga · Accepted Answer · 2016-10-27 10:20:28Z

Finally I solved the above issue with my requirement to type only number is

$(document).on("input", ".skilltxt", function(e) {
                this.value = this.value.replace(/[^\d]/g,'');
             });
             $(".skilltxt").on('paste',function(e) {

                    if(gBrowser=='IE') {
                        var clipboardData, pastedData;
                         clipboardData = e.clipboardData || window.clipboardData;
                          pastedData = clipboardData.getData('Text');

                    }
                    else if((gBrowser=='Firefox')|| (gBrowser=='Chrome')){ 
                          var pastedData = (e.originalEvent || e).clipboardData.getData('text/plain');
                            window.document.execCommand('insertText', false, pastedData)
                    }
                if(Math.floor(pastedData) == pastedData && $.isNumeric(pastedData)){
                   $(this).val($(this).val().replace(/[^\d]/g,''));
                  }
                  else{
                   return false;
                  }
             });

Collectives™ on Stack Overflow

Set an input field to accept only numbers with jQuery

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related