Develop Reference

Javascript, window.event, form validation

This was an example from our prof and my HTML is rusty so I'm not sure exactly what is going on.
For the form input:
<input type="text" name="widgets" id="widgets" size="2" value="0" onchange="calc();" onkeypress="return isNumberInput(this, event);" />
For the Javascript:
function isNumberInput(field, event)
{
var key, keyChar;
if (window.event)
key = window.event.keyCode;
else if (event)
key = event.which;
else
return true;
// Check for special characters like backspace
if (key == null || key == 0 || key == 8 || key == 13 || key == 27)
return true;
// Check to see if it.s a number
keyChar = String.fromCharCode(key);
if (/\d/.test(keyChar))
{
window.status = "";
return true;
}
else
{
window.status = "Field accepts numbers only.";
return false;
}
Can someone explain what is going on? I'm not too familiar with window.event, event.which, wondow.event.keyCode, etc. I don't really understand the logic. TIA!

var key, keyChar; // declare variable to be used
if (window.event) // window.event Microsoft uses window.event. Does it exist? If so continue
key = window.event.keyCode; // Microsoft uses window.event.keyCode to get the key the was pressed
else if (event) // other modern browsers will create an event object for you to use
key = event.which; // event.which is the key that was pressed
else // else we can't get to the key maybe this is a full text browser? Anyways, no good exit function
return true;

Basically, this code prevents the user from entering anything except a digit in the text field. The function returns true to allow the user to enter the keystroke, and false to prevent it. Additionally, special characters are allowed through as well.
As far as the part that is confusing you, this is really old code, designed for older versions of Netscape and IE. With modern browsers, you could just use event.keyCode, but Netscape used to use event.which, and IE used to require you to use window.event. Modern browsers hide the status bar too, making the window.status lines useless.

Add An Even listener For any letter keys pressed?

I am wondering how to create an event listener, so that when any of the character keys are pressed a form pops up and the first input is in focus and is receiving the input, sort of like the just type search style for the webOS 2.0 operating system, but for a contact form. Is there anyway to do so? In case your not familiar here is a link to the webos just type feature
http://www.youtube.com/watch?v=ixPsB7-tVGo

I don't know if you can only subscribe to letter keys.
Your best bet would be to use jQuery to subscribe to .keydown() / .keyup() and check the keycode of the event to see which letter it is. If it's not a letter, don't do anything.
Like this:
$('#target').keydown(function(event) {
if (event.keyCode >= 65 && event.keyCode <= 90) { // if a letter pressed
// play that funky music.
}
});
More on $.keydown.
List of key codes.

Use the keypress event for anything character related. keydown and keyup cannot be used reliably for this purpose. The following is adapted from my answer to a related recent question:
function isCharacterKeyPress(evt) {
if (typeof evt.which == "undefined") {
// This is IE, which only fires keypress events for printable keys
return true;
} else if (typeof evt.which == "number" && evt.which > 0) {
// In other browsers except old versions of WebKit, evt.which is
// only greater than zero if the keypress is a printable key.
// We need to filter out backspace and ctrl/alt/meta key combinations
return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8;
}
return false;
}
var input = document.getElementById("your_input_id");
input.onkeypress = function(evt) {
evt = evt || window.event;
if (isCharacterKeyPress(evt)) {
// Do your stuff here
alert("Character!");
}
};

How to know if .keyup() is a character key (jQuery)

How to know if .keyup() is a character key (jQuery)
$("input").keyup(function() {
if (key is a character) { //such as a b A b c 5 3 2 $ # ^ ! ^ * # ...etc not enter key or shift or Esc or space ...etc
/* Do stuff */
}
});

You can't do this reliably with the keyup event. If you want to know something about the character that was typed, you have to use the keypress event instead.
The following example will work all the time in most browsers but there are some edge cases that you should be aware of. For what is in my view the definitive guide on this, see http://unixpapa.com/js/key.html.
$("input").keypress(function(e) {
if (e.which !== 0) {
alert("Charcter was typed. It was: " + String.fromCharCode(e.which));
}
});
keyup and keydown give you information about the physical key that was pressed. On standard US/UK keyboards in their standard layouts, it looks like there is a correlation between the keyCode property of these events and the character they represent. However, this is not reliable: different keyboard layouts will have different mappings.

Note: In hindsight this was a quick and dirty answer, and may not work in all situations. To have a reliable solution, see Tim Down's answer (copy pasting that here as this answer is still getting views and upvotes):
You can't do this reliably with the keyup event. If you want to know
something about the character that was typed, you have to use the
keypress event instead.
The following example will work all the time in most browsers but
there are some edge cases that you should be aware of. For what is in
my view the definitive guide on this, see
http://unixpapa.com/js/key.html.
$("input").keypress(function(e) {
if (e.which !== 0) {
alert("Character was typed. It was: " + String.fromCharCode(e.which));
}
});
keyup and keydown give you information about the physical key that
was pressed. On standard US/UK keyboards in their standard layouts, it
looks like there is a correlation between the keyCode property of
these events and the character they represent. However, this is not
reliable: different keyboard layouts will have different mappings.
The following was the original answer, but is not correct and may not work reliably in all situations.
To match the keycode with a word character (eg., a would match. space would not)
$("input").keyup(function(event)
{
var c= String.fromCharCode(event.keyCode);
var isWordcharacter = c.match(/\w/);
});
Ok, that was a quick answer. The approach is the same, but beware of keycode issues, see this article in quirksmode.

I'm not totally satisfied with the other answers given. They've all got some kind of flaw to them.
Using keyPress with event.which is unreliable because you can't catch a backspace or a delete (as mentioned by Tarl).
Using keyDown (as in Niva's and Tarl's answers) is a bit better, but the solution is flawed because it attempts to use event.keyCode with String.fromCharCode() (keyCode and charCode are not the same!).
However, what we DO have with the keydown or keyup event is the actual key that was pressed (event.key).
As far as I can tell, any key with a length of 1 is a character (number or letter) regardless of which language keyboard you're using. Please correct me if that's not true!
Then there's that very long answer from asdf. That might work perfectly, but it seems like overkill.
So here's a simple solution that will catch all characters, backspace, and delete. (Note: either keyup or keydown will work here, but keypress will not)
$("input").keydown(function(event) {
var isWordCharacter = event.key.length === 1;
var isBackspaceOrDelete = event.keyCode === 8 || event.keyCode === 46;
if (isWordCharacter || isBackspaceOrDelete) {
// do something
}
});

This helped for me:
$("#input").keyup(function(event) {
//use keyup instead keypress because:
//- keypress will not work on backspace and delete
//- keypress is called before the character is added to the textfield (at least in google chrome)
var searchText = $.trim($("#input").val());
var c= String.fromCharCode(event.keyCode);
var isWordCharacter = c.match(/\w/);
var isBackspaceOrDelete = (event.keyCode == 8 || event.keyCode == 46);
// trigger only on word characters, backspace or delete and an entry size of at least 3 characters
if((isWordCharacter || isBackspaceOrDelete) && searchText.length > 2)
{ ...

If you only need to exclude out enter, escape and spacebar keys, you can do the following:
$("#text1").keyup(function(event) {
if (event.keyCode != '13' && event.keyCode != '27' && event.keyCode != '32') {
alert('test');
}
});
See it actions here.
You can refer to the complete list of keycode here for your further modification.

I wanted to do exactly this, and I thought of a solution involving both the keyup and the keypress events.
(I haven't tested it in all browsers, but I used the information compiled at http://unixpapa.com/js/key.html)
Edit: rewrote it as a jQuery plugin.
(function($) {
$.fn.normalkeypress = function(onNormal, onSpecial) {
this.bind('keydown keypress keyup', (function() {
var keyDown = {}, // keep track of which buttons have been pressed
lastKeyDown;
return function(event) {
if (event.type == 'keydown') {
keyDown[lastKeyDown = event.keyCode] = false;
return;
}
if (event.type == 'keypress') {
keyDown[lastKeyDown] = event; // this keydown also triggered a keypress
return;
}
// 'keyup' event
var keyPress = keyDown[event.keyCode];
if ( keyPress &&
( ( ( keyPress.which >= 32 // not a control character
//|| keyPress.which == 8 || // \b
//|| keyPress.which == 9 || // \t
//|| keyPress.which == 10 || // \n
//|| keyPress.which == 13 // \r
) &&
!( keyPress.which >= 63232 && keyPress.which <= 63247 ) && // not special character in WebKit < 525
!( keyPress.which == 63273 ) && //
!( keyPress.which >= 63275 && keyPress.which <= 63277 ) && //
!( keyPress.which === event.keyCode && // not End / Home / Insert / Delete (i.e. in Opera < 10.50)
( keyPress.which == 35 || // End
keyPress.which == 36 || // Home
keyPress.which == 45 || // Insert
keyPress.which == 46 || // Delete
keyPress.which == 144 // Num Lock
)
)
) ||
keyPress.which === undefined // normal character in IE < 9.0
) &&
keyPress.charCode !== 0 // not special character in Konqueror 4.3
) {
// Normal character
if (onNormal) onNormal.call(this, keyPress, event);
} else {
// Special character
if (onSpecial) onSpecial.call(this, event);
}
delete keyDown[event.keyCode];
};
})());
};
})(jQuery);

I never liked the key code validation. My approach was to see if the input have text (any character), confirming that the user is entering text and no other characters
$('#input').on('keyup', function() {
var words = $(this).val();
// if input is empty, remove the word count data and return
if(!words.length) {
$(this).removeData('wcount');
return true;
}
// if word count data equals the count of the input, return
if(typeof $(this).data('wcount') !== "undefined" && ($(this).data('wcount') == words.length)){
return true;
}
// update or initialize the word count data
$(this).data('wcount', words.length);
console.log('user tiped ' + words);
// do you stuff...
});
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="text" name="input" id="input">
</body>
</html>

How to get the key pressed and put into array in JavaScript?

How do I get the key that was pressed and, instead of returning the key code, put that key into an array?
For example, the user will press 'a'. Then, the code will put 'a' - not the keycode for the character - into an array.
Thanks in advance!

What about something like this?
var your_array = [];
document.onkeydown = function (e) {
var keyPress;
if (typeof event !== 'undefined') {
keyPress = event.keyCode;
}
else if (e) {
keyPress = e.which;
}
your_array.push(String.fromCharCode(keyPress));
return false; // Prevents the default action
};
UPDATE: If you require accurate character information (such as, the distinction of uppercase from lowercase, and other things), make sure to check out #Tim Down's comments below and his other answer.

You need the keypress event for this. keydown and keyup cannot be used reliably to get character information. An excellent and detailed explanation of JavaScript key events is at http://unixpapa.com/js/key.html
var charsTyped = [];
document.onkeypress = function(evt) {
evt = evt || window.event;
// Ensure we only handle printable keys
var charCode = typeof evt.which == "number" ? evt.which : evt.keyCode;
if (charCode) {
charsTyped.push(String.fromCharCode(charCode));
}
};

Daniel's answer is perfect, but if you want to get the actual character (not the numerical code), you can use this function:
String.fromCharCode(code);
See MDN for more info.

In your event handler (assuming e is the event object):
myarray.push(String.fromCharCode(e.charCode));
Notice how fromCharCode returns the character given a Unicode character code. Also notice how I used charCode instead of keyCode as it's more correct in returning the character code, which sometimes is different to the keycode (you want the character).

I wrote a library called keysight to translate keyboard events into keys and characters.
var yourKeyArray = []
node.addEventListener("keydown", function(event) {
var key = keysight(event).key // ignores shift keys, so 'A' is given as 'a'
// var char = keysight(event).char // only characters, and differentiates between 'A' and 'a'
yourKeyArray.push(key)
})

Converting keystrokes gathered by onkeydown into characters in JavaScript

I try to convert keystrokes into chracters.
In other question someone recommand to use the onkeydown function because onkeypress gets handeled differently by different characters.
I don't know how to handle special chracters like ´ ` ' ( ) that might be different in different keyboards around the world.

For keys that have printable character equivalents, you should use the keypress event because you can retrieve character codes from the keypress event, which is generally not possible for keyup and keydown events.
The event properties you need are which and keyCode - pretty much all browsers have one or both of these, though IE muddies the waters by using keyCode for the character code while some other browsers return a (different) key code. Most non-IE browsers also have charCode but it seems all such browsers also have which, so charCode is never needed. A simple example:
document.onkeypress = function(evt) {
evt = evt || window.event;
var charCode = evt.which || evt.keyCode;
var charStr = String.fromCharCode(charCode);
alert(charStr);
};
Here is a useful reference page.

document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
document.getElementById("label").style.display = "none";
if (e.keyCode == '65') {
//a
var lx = document.getElementById('location');
typeIt("a");
}
else if (e.keyCode == '66') {
//b
var lx = document.getElementById('location');
typeIt("b");
}
else if (e.keyCode == '67') {
//c
var lx = document.getElementById('location');
typeIt("c");
}
}
This should successfully convert the key code you press into a string letter, which you can use in a bigger function. It takes more time, but I found it is highly compatible with most browsers and keyboards (whatever the language may be.) I used this code in a text editor project which would be distributed to friends in several countries, so I am certain it will work. Note: the function above only includes the letters "A", "B", and "C".