How to get text of an input text box during onKeyPress?
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/
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>
the value of the input text box, during onKeyPress is always the value before the change
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 of 0:
$('#field').keyup(function() { var $field = $(this); // this is the value before the keypress var beforeVal = $field.val(); setTimeout(function() { // this is the value after the keypress var afterVal = $field.val(); }, 0);});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.