Javascript Textbox Event

Question

I am facing problem with input text type (ie. Text Box).

I have written a function used by the onkeyup event on a Text Box. The line looks like this:

<input type='TEXT' value='abc' onkeyup='changeSomething( this );'>

But now I am facing problem that when user selects values from the previously entered values, I am not getting any event when user selects any previously entered values from the drop down (edit: I believe he is referring to browser autocomplete here).

Does anyone have solution for this? :)

Answer 1

use onchange instead of onkeyup in this case

see: http://www.w3schools.com/jsref/jsref_onchange.asp

e.g.

<input type='text' value='abc' onchange='changeSomething(this);' />

to get around this

EDIT Two things:
1) Autocomplete values can be selected using arrow keys and enter/tab, and by using the mouse. The arrow keys/enter.tab fire the onkeyup events... clicking in the autocomplete box does not, however, fire the onclick event.
2) The onchange event fires as soon as focus is lost IF the content has changed. Focus is not lost when selecting autocomplete values.

Essentially, there does not appear to be any way to reasonably guarantee the event will be processed the way you want.

First off, do you really need to listen to every keystroke? Secondly, would you be better served by turning off autocomplete? (e.g. <input type='text' value='abc' autocomplete='off' onkeyup='changeSomething(this);' />)

Answer 2

Here's a solution which polls the element periodically for any changes

<script type="text/javascript">

var changeWatcher = {
    timeout: null,
    currentValue: '',
    watchForChange: function( el ) {
        if( el.value != this.currentValue ) {
            this.changed( el );
        }
        this.timeout = setTimeout( function() {
             changeWatcher.watchForChange(el)
        }, 200 );
    },
    cancelWatchForChange: function() {
        clearTimeout( this.timeout );
        this.timeout = null;
    },
    changed: function( el ) {
        this.currentValue = el.value;
        // do something with the element and/or it's value
        //console.log( el.value );
    }
}

</script>
<input type='text' value='abc' onfocus='changeWatcher.watchForChange(this)' onblur='changeWatcher.cancelWatchForChange()' onchange='changeWatcher.changed(this)' />

Answer 3

I can't Turn OFF Auto Complete as Suggested... And OnChageEvent is not triggered even if Text Box Contains are changed. So is there any other solution?