how can i retrieving text from input field as its entered in JavaScript? ?

Question

Hi

How can i retrieve the contents of an input field as they are entered with JavaScript?

i know .onChange only works after the focus is changed from the input field?

thanks

Answer 1

You should try the onKeyUp event. Here's a simple example:

<input type="text" onkeyup="document.getElementById('xyz').innerHTML=this.value">
<div id="xyz"></div>

Answer 2

If your input field has focus, use the onKeyUp event to monitor the user typing text.

http://www.w3schools.com/jsref/event_onkeyup.asp

Answer 3

onkeyup will only fire after the key is lifted, so for best results use onkeypress and/or onkeydown. If you use a timer with a delay of 0ms, you can get the new value immediately after it is updated:

myInput.onkeydown = function () {
    var self = this;
    window.setTimeout(function () {
        alert(self.value);
    },0);
} 

Example: http://jsfiddle.net/fgcYD/

Note that this won't catch pasting or dragging and dropping text into the box. For those you need other events.

Answer 4

Once I had used a combination of "onKeyup", "onBlur", onKeyPress to handle all the circumstances while making a TextBox to allow only numeric values. Like this:

//C#    
tc.Attributes.Add("onKeyup", "extractNumber(this,-1,true);"); tc.Attributes.Add("onBlur", "extractNumber(this,-1,true,true);"); tc.Attributes.Add("onKeyPress", "return blockNonNumbers(this, event, true, true);");

with this .js code: http://www.mredkj.com/tutorials/validate2.js

And it still works pretty well.