I am trying to get the text in a text box as the user types in it (jsfiddle playground):
function edValueKeyPress() {
var edValue = document.getElementById("edValue");
var s = edValue.value;
var lblValue = document.getElementById("lblValue");
lblValue.innerText = "The text box contains: " + s;
//var s = $("#edValue").val();
//$("#lblValue").text(s);
}
<input id="edValue" type="text" onKeyPress="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>
The code runs without errors, except that the value of the input text
box, during onKeyPress
is always the value before the change:
Question: How do I get the text of a text box during
onKeyPress
?
Bonus Chatter
There are three events related to "the user is typing" in the HTML DOM:
onKeyDown
onKeyPress
onKeyUp
In Windows, the order of WM_Key
messages becomes important when the user holds down a key, and the key begins to repeat:
WM_KEYDOWN('a')
- user has pushed down the A keyWM_CHAR('a')
- ana
character has been received from the userWM_CHAR('a')
- ana
character has been received from the userWM_CHAR('a')
- ana
character has been received from the userWM_CHAR('a')
- ana
character has been received from the userWM_CHAR('a')
- ana
character has been received from the userWM_KEYUP('a')
- the user has released the A key
Will result in five characters appearing in a text control: aaaaa
The important point being that the you respond to the WM_CHAR
message, the one that repeats. Otherwise you miss events when a key is pressed.
In HTML things are slightly different:
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyUp
Html delivers an KeyDown
and KeyPress
every key repeat. And the KeyUp
event is only raised when the user releases the key.
Take aways
- I can respond to
onKeyDown
oronKeyPress
, but both are still raised before theinput.value
has been updated - I cannot respond to
onKeyUp
, because it doesn't happen as the text in the text-box changes.
Question: How do I get the text of a text-box during onKeyPress
?
None of the answers so far offer a complete solution. There are quite a few issues to address:
keydown
andkeypress
handlers (e.g. backspace and delete keys are suppressed by some browsers).keydown
is not a good idea. There are situations where a keydown does NOT result in a keypress!setTimeout()
style solutions get delayed under Google Chrome/Blink web browsers until the user stops typing.A more correct solution will handle the
keypress
,keyup
,input
, andchange
events.Example:
Fiddle:
http://jsfiddle.net/VDd6C/2175/
Handling all four events catches all of the edge cases. When working with input from a user, all types of input methods should be considered and cross-browser and cross-device functionality should be verified. The above code has been tested in Firefox, Edge, and Chrome on desktop as well as the mobile devices I own.
So there are advantages and disadvantages to each event. The events
onkeypress
andonkeydown
don't retrieve the latest value, andonkeypress
doesn't fire for non-printable characters in some browsers. Theonkeyup
event doesn't detect when a key is held down for multiple characters.This is a little hacky, but doing something like
seems to handle the best of all worlds.
This is on purpose: This allows the event listener to cancel the keypress.
If the event listeners cancels the event, the value is not updated. If the event is not canceled, the value is updated, but after the event listener was called.
To get the value after the field value has been updated, schedule a function to run on the next event loop. The usual way to do this is to call
setTimeout
with a timeout of0
:Try here: http://jsfiddle.net/Q57gY/2/
Edit: Some browsers (e.g. Chrome) do not trigger keypress events for backspace; changed keypress to keyup in code.
easy...
In your keyPress event handler, write
keep it Compact.
Each time you press a key, the function
edValueKeyPress()
is called.You've also declared and initialized some variables in that function - which slow down the process and requires more CPU and memory as well.
You can simply use this code - derived from simple substitution.
That's all you want, and it's faster!