26

My site has an input box, which has a onkeydown event that merely alerts the value of the input box.

Unfortunately the value of the input does not include the changes due to the key being pressed.

For example for this input box:

<input onkeydown="alert(this.value)" type="text" value="cow" />

The default value is "cow". When you press the key s in the input, you get an alert("cow") instead of an alert("cows"). How can I make it alert("cows") without using onkeyup? I don't want to use onkeyup because it feels less responsive.

One partial solution is to detect the key pressed and then append it to the input's value, but this doesn't work in all cases such as if you have the text in the input highlighted and then you press a key.

Anyone have a complete solution to this problem?

Improve this question
1
  • alert($("input#recomendar_producto_email").val()); Commented Aug 31, 2011 at 20:45

6 Answers 6

Reset to default
23

NOTE: It's over a decade (!!) since I wrote this answer. The input event has become ubiquitous, and should be used instead of this hack.

What does keydown/keyup even mean for tablet and voice input devices?

The event handler only sees the content before the change is applied, because the mousedown and input events give you a chance to block the event before it gets to the field.

You can work around this limitation by giving the browser a chance to update the field's contents before grabbing its value - the simplest way is to use a small timeout before checking the value.

A minimal example is:

<input id="e"
    onkeydown="window.setTimeout( function(){ alert(e.value) }, 1)"
    type="text" value="cow" />

This sets a 1ms timeout that should happen after the keypress and keydown handlers have let the control change its value. If your monitor is refreshing at 60fps then you've got 16ms of wiggle room before it lags 2 frames.

A more complete example (which doesn't rely on named access on the Window object would look like:

var e = document.getElementById('e');
var out = document.getElementById('out');

e.addEventListener('input', function(event) {
  window.setTimeout(function() {
    out.value = event.target.value;
  }, 1);
});
<input type="text" id="e" value="cow">
<input type="text" id="out" readonly>

When you run the above snippet, try some of the following:

  • Put the cursor at the start and type
  • Paste some content in the middle of the text box
  • Select a bunch of text and type to replace it
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

11

Please, try to use oninput event. Unlike onkeydown, onkeypress events this event updates control's value property.

<input id="txt1" value="cow" oninput="alert(this.value);" />
Improve this answer

Comments

6

Note that in newer browsers you'll be able to use the new HTML5 "input" event (https://developer.mozilla.org/en-US/docs/DOM/window.oninput) for this. Most non-IE browsers have supported this event for a long time (see compatibility table in the link); for IE it's version >/9 only unfortunately.

Improve this answer

Comments

0

keyup/down events are handled differently in different browsers. The simple solution is to use a library like mootools, which will make them behave the same, deal with propagation and bubbling, and give you a standard "this" in the callback.

Improve this answer

Comments

0

To my knowledge you can't do that with a standard input control unless you roll your own.

Improve this answer

Comments

-2

Jquery is the optimal way of doing this. Please reference the following below:

let fieldText = $('#id');
let fieldVal = fieldText.val();

fieldText.on('keydown', function() {
   fieldVal.val();
});
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.