Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Restrict input to number only on pasting

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




});

}

like image 202
TSL Avatar asked Aug 19 '13 10:08

TSL


People also ask

How do you allow only numbers when pasted in input text field?

You can simply assign an integer variable to the input widget, it won't allow you to either enter or copy-paste text, It will only allow numbers.

How do I restrict only input numbers?

To limit an HTML input box to accept numeric input, use the <input type="number">. With this, you will get a numeric input field.

How do you prevent input fields from copying?

The onpaste attribute lets us prevent pasting into the form. Adding the autocomplete attribute as well as preventing drag and drop into the element. If you want to avoid the on{event} code in the HTML, you can do it the cleaner way: myElement.

How do I restrict copy and paste in a TextBox?

Disable Copy and Paste in an ASP.NET Webpage TextBox without JavaScript; we need to set the following properties of the TextBox: oncopy="return false" onpaste="return false" oncut="return false"


1 Answers

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,""));
    }
});
like image 122
Optimus Prime Avatar answered Sep 21 '22 03:09

Optimus Prime