Ian Boyd Ian Boyd - 4 months ago 49
Javascript Question

How to get text of an input text box during onKeyPress?

i am trying to get the text in a text box as the user types in it (jsfiddle playground):

<html>
<body>
<input id="edValue" type="text" onKeyPress="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>
</body>

<script>
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);
}
</script>

</html>


‚Äč
The code runs without errors, except that the value of the
input text
box, during
onKeyPress
is always the value before the change:

enter image description here


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 key

  • WM_CHAR('a')
    - an
    a
    character has been received from the user

  • WM_CHAR('a')
    - an
    a
    character has been received from the user

  • WM_CHAR('a')
    - an
    a
    character has been received from the user

  • WM_CHAR('a')
    - an
    a
    character has been received from the user

  • WM_CHAR('a')
    - an
    a
    character has been received from the user

  • WM_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
    or
    onKeyPress
    , but both are still raised before the
    input.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
?

Bonus Reading




Answer

Keep it simple. Use both onKeyPress() and onKeyUp():

<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()">

This takes care of getting the most updated string value (after key up) and also updates if the user holds down a key.

jsfiddle: http://jsfiddle.net/VDd6C/8/