Allow only numbers and ctrl + a, ctrl + v, ctrl + c in the text box

Question

I am trying to allow users to enter only numbers and copy and paste controls in the text box. I can limit the user to enter only numbers, but copying, pasting does not work for me, help me fix it.

Here is my script:

$(".allow_only_numbers").keydown(function (e) { var ctrlDown = false; var ctrlKey = 17, vKey = 86, cKey = 67; if (e.keyCode === ctrlKey){ ctrlDown = true; } // Allow: backspace, delete, tab, escape, enter and . if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 || // Allow: Ctrl (e.keyCode === ctrlKey) || // Allow: Ctrl+A (e.keyCode === 65 && e.ctrlKey === true) || // Allow: Ctrl+v (e.keyCode === vKey && ctrlDown) || // Allow: Ctrl+c (e.keyCode === cKey && ctrlDown) || // Allow: home, end, left, right, down, up (e.keyCode >= 35 && e.keyCode <= 40)) { // let it happen, don't do anything return; } // Ensure that it is a number and stop the keypress if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { e.preventDefault(); } }); 

Here is the jsfiddle link:

https://jsfiddle.net/sureshpattu/stwzhceL/1/

Answer 1

Try event.keyCode and event.metaKey like this.

 $(document).ready(function() { $(".allow_only_numbers").keydown(function(e) { // Allow: backspace, delete, tab, escape, enter and . if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 || // Allow: Ctrl+A,Ctrl+C,Ctrl+V, Command+A ((e.keyCode == 65 || e.keyCode == 86 || e.keyCode == 67) && (e.ctrlKey === true || e.metaKey === true)) || // Allow: home, end, left, right, down, up (e.keyCode >= 35 && e.keyCode <= 40)) { // let it happen, don't do anything return; } // Ensure that it is a number and stop the keypress if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { e.preventDefault(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <input type="number" class="allow_only_numbers" /> 

EDIT:

Remove the following code snippets from the code.

 var ctrlDown = false; var ctrlKey = 17, vKey = 86, cKey = 67; if (e.keyCode === ctrlKey) { ctrlDown = true; } 

Because ctrlDown will be false by pressing C and V to copy and paste. And so your ctr+c and ctrl+v do not work.

Answer 2

 $(".allow_only_numbers").keydown(function (e) { var isModifierkeyPressed = (e.metaKey || e.ctrlKey || e.shiftKey); var isCursorMoveOrDeleteAction = ([46,8,37,38,39,40].indexOf(e.keyCode) != -1); var isNumKeyPressed = (e.keyCode >= 48 && e.keyCode <= 58) || (e.keyCode >=96 && e.keyCode <= 105); var vKey = 86, cKey = 67,aKey = 65; switch(true){ case isCursorMoveOrDeleteAction: case isModifierkeyPressed == false && isNumKeyPressed: case (e.metaKey || e.ctrlKey) && ([vKey,cKey,aKey].indexOf(e.keyCode) != -1): break; default: e.preventDefault(); } }); 

here is a working example

https://jsfiddle.net/stwzhceL/8/

this allows you ctrl+a , ctrl+c and ctrl+v , as well as the arrow keys, delete key, and return key.

plus this code also covers mac. (that cmd+a/cmd+c/cmd+v )

Answer 3

 $(".allow_only_numbers").on("input",function (e) { e.target.value = e.target.value.replace(/[^0-9]/g,'') }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="allow_only_numbers" /> 

Answer 4

If you changed the keydown event to a keydown event, you can use e.ctrlKey , which will be true when you press the ctrl key.

Answer 5

 function numbersonly(evt) { evt = (evt) ? evt : window.event; var charCode = (evt.which) ? evt.which : evt.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } return true; } 

Answer 6

This should give you an idea. Sorry I'm on a Mac, and as far as I know, e.ctrlKey and the like do not work on a Mac.

 var mod; var ouput = jQuery('#output'); var numeric = jQuery('#numeric').keydown(function(e){ mod = e.which; if(!(e.which >= 48 && e.which <= 57) && (e.which != 8) && (mod && (e.which == 67 || e.which != 86))){ e.preventDefault(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='text' id='numeric'/> <label id='output'></label>