jQuery - How can I allow both numpad and number key row input; as well as prevent special characters from being entered?

Question

I want to allow both number pad numeric and oridinary number from keyboard. Currently, it only allows the number key row. I also only want numbers to be entered, but it currently allows special characters.

$(document).ready(function() {
  $('#price').keydown(function(event) {
        if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57) && event.which != 8) {
            event.preventDefault();
        }
    });
});

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

Possible duplicate of [Allow only numbers to be typed in a textbox](https://stackoverflow.com/questions/7295843/allow-only-numbers-to-be-typed-in-a-textbox) — Hassan Imam, Nov 17 '17 at 05:27

Namindu Sanchila · Answer 1 · 2017-11-17T06:33:29.647

Have a look at this plug-in (Fork of texotela's numeric jquery plugin). This (jStepper) is another one.

This is a link if you want to build it yourself.

  $(document).ready(function() {
    $("#txtboxToFilter").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, Command+A
            (e.keyCode === 65 && (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();
        }
    });
});

NOTE: If your webpage uses HTML5, you can use the built-in <input type="number"> and use the min and max properties to control the minimum and maximum value.

$(function() {
  $('#staticParent').on('keydown', '#child', function(e){-1!==$.inArray(e.keyCode,[46,8,9,27,13,110,190])||(/65|67|86|88/.test(e.keyCode)&&(e.ctrlKey===true||e.metaKey===true))&&(!0===e.ctrlKey||!0===e.metaKey)||35<=e.keyCode&&40>=e.keyCode||(e.shiftKey||48>e.keyCode||57<e.keyCode)&&(96>e.keyCode||105<e.keyCode)&&e.preventDefault()});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="staticParent">
    <input id="child" type="textarea" />
</div>

I coppied from it on here

If its help for you.Please vote first writer .

a complete answer for control only numeric values ; tnax – R.Akhlaghi Dec 03 '19 at 10:58 — R.Akhlaghi, Dec 03 '19 at 10:58

score 1 · Answer 2 · answered Nov 17 '17 at 05:44

Updated your code

$(document).ready(function() {
  $('#price').keydown(function(event) {
        if((event.which >= 48 && event.which <= 57) && event.shiftKey) {
            event.preventDefault();    
        }
        if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57) && event.which != 8) {
            event.preventDefault();
        }
    });
});

Beginner · Answer 3 · 2017-11-17T05:34:53.520

0

Use keypress for that instead of keydown

then

the keyCode of 0 to 9 are 48 to 57 so use this condition

if (event.keyCode < 48 || event.keyCode > 57) {
   event.preventDefault(); 
}

this condition returns true if you enter keys that are not 0, 1, 2, 3, 4, 5, 6, 7 ,8 and 9 or not numbers

So your code would be like this

$(document).ready(function() {
  $('#price').keypress(function(event) {
       if (event.keyCode < 48 || event.keyCode > 57) {
           event.preventDefault(); 
       }
    });
});

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

edited Nov 17 '17 at 05:34

answered Nov 17 '17 at 05:29

Beginner

4,118
3
17
26

It allow special characters now – user3386779 Nov 17 '17 at 05:35
I tested it and it doesn't allowed special chars , it only allows number – Beginner Nov 17 '17 at 05:39

score 0 · Answer 4 · answered Nov 17 '17 at 05:39

0

Why we don't user input type number. I think just do it easy like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='number' id='price'>

answered Nov 17 '17 at 05:39

Hong Van Vit

2,884
3
18
43

jQuery - How can I allow both numpad and number key row input; as well as prevent special characters from being entered?

4 Answers4