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 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.
To limit an HTML input box to accept numeric input, use the <input type="number">. With this, you will get a numeric input field.
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.
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"
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.
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,""));
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With