CODEWITHSUNDEEP
javascript
VansFannel
VansFannel

Reputation: 45951

onkeydown with jquery and javascript function

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?

Upvotes: 2

Views: 1178

Answers (5)

Cristian I
Cristian I

Reputation: 1

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

Upvotes: 0

VansFannel
VansFannel

Reputation: 45951

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>

Upvotes: 0

Patrick Evans
Patrick Evans

Reputation: 42756

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

Upvotes: 1

Pavel S
Pavel S

Reputation: 68

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.

Upvotes: 0

Dilip Oganiya
Dilip Oganiya

Reputation: 1554

You can use following code in Firefox:

key = event.which;

Upvotes: 0

Related Questions