Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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):

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:

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

  • Getting a form value with jQuery
  • Get the value in an input text box
like image 596
Ian Boyd Avatar asked Jul 06 '12 15:07

Ian Boyd


People also ask

How will you get text inside an input tag?

Answer: Use the value Property You can simply use the value property of the DOM input element to get the value of text input field. The following example will display the entered text in the input field on button click using JavaScript.

What does Onkeypress do in HTML?

The onkeypress attribute fires when the user presses a key (on the keyboard).

What is input text box?

A textbox is a common input control in HTML, but it has various hidden attributes. An HTML text box is an area on the screen wherein the user can enter the text input. It is a common input element found in many software programs, such as web browsers, email clients, and word processors.

Is keypress deprecated?

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.


2 Answers

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/

like image 50
Jonathan M Avatar answered Sep 24 '22 20:09

Jonathan M


Handling the input event is a consistent solution: it is supported for textarea and input elements in all contemporary browsers and it fires exactly when you need it:

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;
}
<input id="edValue" type="text" onInput="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

I'd rewrite this a bit, though:

function showCurrentValue(event)
{
    const value = event.target.value;
    document.getElementById("label").innerText = value;
}
<input type="text" onInput="showCurrentValue(event)"><br>
The text box contains: <span id="label"></span>
like image 29
YakovL Avatar answered Sep 25 '22 20:09

YakovL