7

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

0

2 Answers 2

12

use onchange instead of onkeyup in this case

see: http://www.w3schools.com/jsref/event_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);' />)

6
  • 1
    +1 the key events are notoriously fragile and won't handle mouse based copy/paste for example
    – annakata
    Jun 16, 2009 at 11:56
  • excellent point. keyup/keypress are, however, very good if you're providing a keyboard driven/permissable interface. Other than that... not so useful. Jun 16, 2009 at 12:00
  • I view it like this: if the key event in and of itself is what you're interested in, then use key events. If you're interested in the effect of the key event use something else.
    – annakata
    Jun 16, 2009 at 12:01
  • He probably needs onkeyup /and/ onchange. onchange will won't fire after typing until the focus moves away from the input. Jun 16, 2009 at 12:17
  • possibly. it's not exactly clear from the OP question, but you could well be right. Jun 16, 2009 at 12:35
3

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)' />
1
  • We are not getting any of the events is this case... So this will not work.. sorry for that..
    – Pradeep
    Jun 17, 2009 at 4:34

Your Answer

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