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(); 
        }
    }
    });
}




});

}

Answer 1

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,""));
    }
});

Answer 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);
    });

Answer 3

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

Answer 4

Other plugin to implement your form is jquery.autonumeric.

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

Answer 5

$(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

Answer 6

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.

Answer 7

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.