TextField 'Change' Event only triggers on blur

Question

Normally, the Change event will trigger after the TextField loses its focus (on blur).

But I need it to trigger as soon as the value of the field changes, without the need to lose the focus on the field.

The KeyListener doesn't cut it, because the value may come, for example, from a barcode scanner.

Is there any way to do achieve this?

Thanks in advance!

Gwenore

Answer 1

I haven't worked with ext-gwt, but this is what you have to do: You have to use the KeyListener AND add a listener for ONPASTE. The 'Change' event is provided by the browser, and it is triggered only while focus goes away (during a blur), and if text has changed.

Manning

Thanks for your answer. Unfortunately, after trying to apply your solution, it seems the Event type 'OnPaste' in Ext-GWT - which represents the DOM ONPASTE event - is not working either. :( – Gwenore

Check out if this helps. – Manning

The support for the paste event differs quite a lot from browser to browser, in detail: http://www.quirksmode.org/dom/events/cutcopypaste.html (it looks like it doesn't work with Opera at all). Try it with your browser on the test page. An important difference may be, on which element each browser fires the event - and on which one Ext-GWT registers the listener. – Palatal

Answer 2

I don't think there is an event that works cross-browser for all situations. So the "poor man's solution" is to poll the text field every second or so. In fact, such a test can be performed pretty quickly, and if you don't use it on lots of text fields at once, you should be fine.

You can use my little example code if you like (it works on a plain GWT TextBox, but it should be straightforward to adapt for an Ext-GWT TextField)

@Override
public void onModuleLoad() {

    final TextBox textBox = new TextBox();
    final int delayMilliseconds = 1000;

    Scheduler.get().scheduleFixedDelay(new RepeatingCommand() {

        private String previousValue = "";

        @Override
        public boolean execute() {

            final String newValue = textBox.getValue();
            if (!previousValue.equals(newValue)) {
                try {
                    valueChanged();
                } finally {
                    previousValue = newValue;
                }
            }
            return true;
        }

        private void valueChanged() {
            // React on the change
            Window.alert("Value changed");
        }

    }, delayMilliseconds);

    RootPanel.get().add(textBox);
}

Palatal