Develop Reference

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?

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

You can use following code in Firefox:
key = event.which;

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.

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>

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

event.keycode issue

i have a javascript code like below,
if (event.keycode != 37 && event.keycode != 39)
{
var phoneNumber = $('#phoneNumber').val();
if (phoneNumber.length < 1 && event.keyCode != 48)
$('#phoneNumber').val(0)
else if ((phoneNumber.length < 2 && event.keyCode == 48) )
event.preventDefault();
else
$('#phoneNumber').val(phoneNumber)
}
keycode 37 = left arrow, keycode 39 = right arrow but when i pressed these keys on keyboard condition which is between if block being executed, i am using chrome browser, also i used the if statement below,
if (event.keycode != 37 || event.keycode != 39)
{
var phoneNumber = $('#phoneNumber').val();
if (phoneNumber.length < 1 && event.keyCode != 48)
$('#phoneNumber').val(0)
else if ((phoneNumber.length < 2 && event.keyCode == 48) )
event.preventDefault();
else
$('#phoneNumber').val(phoneNumber)
}
urgent helps greatly appreciated,
Thanks everybody.

One issue is capitalization: it's keyCode, not keycode. Your code is using them inconsistently.

validation not working in Firefox but works in IE,Chrome

I use the following java script function for integer validate which means the text box can allow to enter only the integer values alone.*It was work fine in Internet explorer and google chrome*.But I use this same function in FireFox the text box didn't allow to enter any characters in that which means it doesn't allow characters,numbers,space,anything else..How to solve this problem?
javascript function
$('.intValidate').live('keypress', function(event) {
var integervalidate = intValidate(event);
if (integervalidate == false)
return false;
});
function intValidate(event) {
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||(event.keyCode == 65 && event.ctrlKey === true) ||(event.keyCode >= 35 && event.keyCode <= 39))
{
return;
}
else
{
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 ))
{
event.preventDefault();
}
I use the class like,
<input type="text" id="abcd" style="width:30px" maxlength="2"class="intValidate""/>

Your problem is the inconsistent way that browsers use the keypress event.
Read this post to get a good explanation with an example of a work around.

You're examining keycodes in the keypress event. You should be looking at charCode values instead.

jQuery/JS Keycodes: Several keycodes in one IF statement

I'm trying to set up some keycodes for an app I'm working on but it really drives me crazy.
I'm trying to set up keycodes which would say, from keyCode 65 to 91 , 44 , 47 and few others, do function.
So I have this:
var e = event || evt;
if ((e.keyCode > 65 || e.Keycode < 91)){
// Do function
}
which works find. Now if I try to add another keycode it doesn't work.
This is what I tried:
if ((e.keyCode > 65 || e.Keycode < 91) && (e.keyCode == 44) && (e.keyCode == 47)){
Does someone help me to add different keycodes in one If statement?
Thanks alot

Try this
if (
// get all the keys between 65-90
(e.keyCode >= 65 && e.keyCode <= 90)
// or 44 or 47
|| e.keyCode == 44 || e.keyCode == 47)
{
// do stuff
}
If the conditional logic is tripping you up, I think you might be best served by thinking about the numbers you want to include (not exclude). Break them into ranges and put each range on its own line. Start with pseudo code:
if
// keys between 31-47
// or keys between 58-90
then
// do stuff
end
Then fill in the conditions:
if (
// keys between 31-47
(e.keyCode >= 31 && e.keyCode <= 47)
// or keys between 58-90
|| (e.keyCode >= 58 && e.keyCode <= 90)
)
{
// do stuff
}

If you want everything from 31 to 90 except for those from 48 through 57:
if (e.keyCode >= 31 && e.keyCode <= 90 && !(e.keyCode >= 48 && e.keyCode <= 57)) {
// whatever
}
Now that could be written equivalently as:
if (e.keyCode >= 31 && e.keyCode <= 47 || e.keyCode >= 58 && e.keyCode <= 90) {
// whatever
}

if ((e.keyCode > 65 && e.Keycode < 91) || e.keyCode == 44 || e.keyCode == 47){
//do stuff
}

Capturing the tab key using JavaScript in Firefox

I use the following to restricts user to enter only some characters.
When I press tab, the cursor does not point to next control (in Mozilla). But it works fine in IE.
// Restricts user to enter characters other than a to z, A to Z and white space( )
// Rauf K. 06.11.2010
$("input:text.characters_only").keypress(function(e) {
if (!((e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122) || e.which == 32 || e.which == 8 || e.which == 9)) {
return false;
}
});

I would recommend trying e.keyCode instead of e.which. Here is a SO link that describes a good method of getting the key strike into a single variable regardless: jQuery Event Keypress: Which key was pressed?

Perhaps if you start with something like:
if (e.keyCode === 9) { // TAB
return true;
}