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