onkeydown with jquery and javascript function

Question

I have developing an ASP.NET MVC 5 Web App and I have this html:

<div class="group">
    <input type="text"
            class="productClass"
            name="Configurations[0].RemainingCodes"
            id="Configurations[0].RemainingCodes"
            onkeydown='IsValidKey(event);'
            required />
</div>

And this Javascript function:

function IsValidKey(e) {
    e = e || window.event;
    var code = e.keyCode;

    return (e.keyCode >= 48 && e.keyCode <= 57) || e.keyCode == 8 || e.keyCode == 46 || (e.keyCode >= 96 && e.keyCode <= 105);
}

But it doesn't work although I can get keycode in code variable. I'm trying to allow only numbers [0..9] key and backspace, but I can type letters.

The first version was this:

And javascript:

function IsValidKey()
{
    return (window.event.keyCode >= 48 && window.event.keyCode <= 57) || window.event.keyCode == 8 || window.event.keyCode == 46 || (window.event.keyCode >= 96 && window.event.keyCode <= 105);
}

But FireFox complains about window.event doesn't exist.

I need to be able to run this code on as much as possible browsers.

And this is not a duplicate because I'm getting the code in Firefox and the function allows to enter letters.

How can I fix this problem?

Possible duplicate of [window.event.keyCode how to do it on Firefox?](http://stackoverflow.com/questions/6116933/window-event-keycode-how-to-do-it-on-firefox) — Rayon, Apr 26 '16 at 09:54
http://blog.niftysnippets.org/2011/11/story-on-return-false.html — Rayon, Apr 26 '16 at 10:00

Patrick Evans · Accepted Answer · 2016-04-26T10:02:39.133

IsValidKey(this) does not pass in the event object, it is passing in the html element. To pass in the event you have to specify event like: IsValidKey(this,event). Also you have to use return in your inline js, otherwise you need to call evt.preventDefault() in your callback.

function IsValidKey(element,evt) {
  var event = ((window.event) ? (window.event) : (evt));
  
  return (event.keyCode >= 48 && event.keyCode <= 57) || 
         event.keyCode == 8 || 
         event.keyCode == 46 || 
         (event.keyCode >= 96 && event.keyCode <= 105);
}

<input type="text" onkeydown='return IsValidKey(this,event);' />

Or instead of using inline js you could use addEventListener, or jQuery's .keydown method to add your listeners and the event object will get passed in automatically

document.querySelector("#inputID").addEventListener("keydown",IsValidKey);
//OR jQuery("#inputID").keydown(isValidKey);
function IsValidKey(evt) {
/*.... rest of code ....*/

score 0 · Answer 2 · edited Apr 26 '16 at 09:51

0

You can use following code in Firefox:

key = event.which;

edited Apr 26 '16 at 09:51

Rory McCrossan

331,213
40
305
339

answered Apr 26 '16 at 09:50

Dilip Oganiya

1,504
12
20

score 0 · Answer 3 · answered Apr 26 '16 at 09:51

0

I always do it this way in jQuery and haven't had problems with browser support.

$(document).keydown(function (e) {
        var c = e.which;
        e.preventDefault;
        return (c >= 48 && c <= 57) || c == 8 || c == 46 || (c >= 96 && c <= 105);
    });

As to why Firefox is complaining about window.event - browsers have different event models, and as far as I know, window.event simply doesn't exist in Firefox.

answered Apr 26 '16 at 09:51

Pavel S

68
8

Thanks, but there is something on that function that allow me to type letters. – VansFannel Apr 26 '16 at 09:58

score 0 · Answer 4 · answered Apr 26 '16 at 10:08

Based on an answer that someone posted but he/she deleted it, this is my solution:

function IsValidKey(e) {
    var c = e.which;

    if (!((c >= 48 && c <= 57) || c == 8 || c == 46 || (c >= 96 && c <= 105)))
        e.preventDefault();
}

HTML:

<div class="group">
    <input type="text"
            class="productClass"
            name="Configurations[0].PkgRatio"
            id="Configurations[0].PkgRatio"
            onkeydown='IsValidKey(event);'
            required />
</div>

score 0 · Answer 5 · edited May 23 '17 at 11:52

0

What you need is to return the boolean in the onkeydown attribute: onkeydown='return IsValidKey(event);'

If the event handler is returning false is blocking the propagation of the event, or the bubbling up.

See this answer too : https://stackoverflow.com/a/4379459/4768374

edited May 23 '17 at 11:52

Community

1
1

answered Apr 26 '16 at 10:13

Cristian I

1
1

onkeydown with jquery and javascript function

5 Answers5