Restrict input to number only on pasting

Question

I have an input filed with a class called restrict-numbers which i want to restrict the entered characters to only accept numbers, i used the following code which is great but the problem that i want to make the same restriction works with pasting in the input filed without totally disabling pasting:

function input_only_numbers(){
$("input[type=text]").each(function(){
if( $(this).hasClass("restrict-numbers") ){    
    $(this).keydown(function(event) {
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || 

        // Allow: Ctrl+A
    (event.keyCode == 65 && event.ctrlKey === true) ||

        // Allow: Ctrl+V
    (event.ctrlKey == true && (event.which == '118' || event.which == '86')) ||

        // Allow: Ctrl+c
    (event.ctrlKey == true && (event.which == '99' || event.which == '67')) ||

        // Allow: Ctrl+x
    (event.ctrlKey == true && (event.which == '120' || event.which == '88')) ||

        // Allow: home, end, left, right
    (event.keyCode >= 35 && event.keyCode <= 39)) {
    // let it happen, don't do anything
        return;
    }
    else {
    // Ensure that it is a number and stop the keypress
        if ( event.shiftKey|| (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 ) ){
        event.preventDefault(); 
        }
    }
    });
}




});

}

You can use the jQuery Form Validation plugin to perform such tasks. http://jqueryvalidation.org/documentation/ — DevlshOne, Aug 19 '13 at 10:28
Possible duplicate of [How to allow only numeric (0-9) in HTML inputbox using jQuery?](https://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery) — emkey08, Jul 18 '19 at 08:34

Optimus Prime · Accepted Answer · 2013-08-19T11:02:26.047

Implement your form with jquery.numeric plugin.

$(document).ready(function(){
    $(".numeric").numeric();
});

Moreover this works with textareas also!

Or better change the input when user tries to submit,

$('form').submit(function () {
    if ($('#numeric').value != $('#numeric').value.replace(/[^0-9\.]/g, '')) {
       $('#numeric').value = $('#numeric').value.replace(/[^0-9\.]/g, '');
    }
});

That's what you are doing, you want to remove the characters, other than numbers, so why make so much efforts, just remove them at the end.

And here is my favourite option,

Try the HTML5 number input:

<input type="number" value="0" min="0">

For non-compliant browsers there are Modernizr and Webforms2 fallbacks.

or

You may bind "paste" action to a function too,

$( "#input" ).on("paste", function() {
    if ($('"#input').val() != $('"#input').val().replace(/[^\d\.]/g,"")) 
    { $('"#input').val($('"#input').val().replace(/[^\d\.]/g,""));
    }
});

Thank you I used the plugin I searched for it cuz the link is not working :D — TSL, Aug 19 '13 at 12:03

score 2 · Answer 2 · answered Jan 12 '18 at 06:57

2

$(".numbersOnly").bind('paste', function(e) {
        var self = this;
        setTimeout(function(e) {
            var val = $(self).val();
            if (val != '0') {
                var regx = new RegExp(/^[0-9]+$/);
                if (!regx.test(val)) {
                    $(".numbersOnly").val("");
                }
                $(this).val(val);
            }
        }, 0);
    });

answered Jan 12 '18 at 06:57

Abhilash Sringar

41
5

Perfect Jquery Code.Works fine for me. – LOKI Apr 19 '18 at 15:54
why use from settimeout ?? – R.Akhlaghi Dec 22 '19 at 10:42

Carsten Massmann · Answer 3 · 2013-08-20T05:22:33.510

Maybe you can make yourself less work if you do not control the actual keys pressed by the user, but instead the contents of the input field(s)? You can still work with the keyup-event but, instead of ckecking the keycode you should be looking at the current contents of the input field ($(this).val()) by applying a suitable regular expression on it.

This way the user can work in any preferred way but you will still have total control over your allowable contents without making it too complicated for yourself!

Edit (answer to comment):

Optimus Prime has already provided some very useful code along those lines, my version would be something like this

$( "input[type=text]" ).on("keyup", function() {
  var o,v=(o=$(this)).val();
  o.val(v.replace(/[^\d]/g,""));
});

The regular expression is still somehow crude. Feel free to improve it here: http://jsfiddle.net/zWDGS/ (or this version: http://jsfiddle.net/zWDGS/1/).

Can you provide me with an example please? – TSL Aug 19 '13 at 11:18 — TSL, Aug 19 '13 at 11:18

score 0 · Answer 4 · answered Dec 17 '13 at 19:33

0

Other plugin to implement your form is jquery.autonumeric.

jQuery(function($) {
      $('#someID_defaults').autoNumeric('init');    
  });

answered Dec 17 '13 at 19:33

ceospina

1
1

score 0 · Answer 5 · answered Dec 19 '13 at 08:55

$(document).ready(function() 
{
    $("#test").keydown(function(event) {
        // Allow: backspace, delete, tab, escape, and enter
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
                // Allow: Ctrl+V
                (event.ctrlKey == true && (event.which == '118' || event.which == '86')) ||  
                // Allow: Ctrl+c
                (event.ctrlKey == true && (event.which == '99' || event.which == '67')) || 
                // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) || 
             // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault(); 
            }   
        }
    });
});

The above is works fine for it restricts number and it doesn't allow characters and you can paste numbers

score 0 · Answer 6 · answered Jun 05 '19 at 06:14

This code is for javascript and used in my angular app.

jQuery('#Id').on('paste keyup', function(e){
    jQuery(this).val(document.getElementById('Id').value.replace(/[^\d]/g, ''));
  });

Where Id is input field id and it is blocked alphabet to enter and paste in the field.

score 0 · Answer 7 · answered Oct 22 '19 at 13:52

0

Actually it must be like that for jquery;

$('.just_numbers').on('paste keyup', function(e){ $(this).val($(this).val().replace(/[^\d]/g, '')); });

Paste also, pressing also ignoring except numbers.

answered Oct 22 '19 at 13:52

Metin Erbek

84
2
8

Restrict input to number only on pasting

7 Answers7

or

Linked