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? — Rayon
– Rayon, Commented Apr 26, 2016 at 9:54

Patrick Evans · Accepted Answer · 2016-04-26 10:02:39Z

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 ....*/

Rory McCrossan · Accepted Answer · 2016-04-26 09:51:20Z

0

You can use following code in Firefox:

key = event.which;

edited Apr 26, 2016 at 9:51

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

answered Apr 26, 2016 at 9:50

Dilip Oganiya

1,56414 silver badges22 bronze badges

Comments

Pavel S · Accepted Answer · 2016-04-26 09:51:47Z

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, 2016 at 9:51

Pavel S

688 bronze badges

1 Comment

VansFannel Over a year ago

Thanks, but there is something on that function that allow me to type letters.

VansFannel · Accepted Answer · 2016-04-26 10:08:16Z

0

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>

answered Apr 26, 2016 at 10:08

VansFannel

46.1k119 gold badges384 silver badges657 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:52:36Z

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, 2017 at 11:52

CommunityBot

11 silver badge

answered Apr 26, 2016 at 10:13

Cristian I

11 bronze badge

Collectives™ on Stack Overflow

onkeydown with jquery and javascript function

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related