“Change” browser event in GWT

问题

I create table in GWT and one of columns contains cells which have inputs. I would like to get information when text in input change. In my cell I overload render() and onBrowserEvent() methods. Here's the code:

public HourPickerCell() {
    super("change", "keyup");
}

@Override
public void render(Context context, String value, SafeHtmlBuilder sb) {
    if (value == null) {
        return;
    }
    sb.appendHtmlConstant("<input class=\"hourPicker\" type=\"text\" value=\"" + value + "\"></input>");        
}


@Override
public void onBrowserEvent(Context context, Element parent, String value, NativeEvent event, ValueUpdater<String> valueUpdater) {
    System.out.println(event.getType());
    super.onBrowserEvent(context, parent, value, event, valueUpdater);

    if (event.getType().equals("change")) {
        EventTarget eventTarget = event.getEventTarget();
        if (!Element.is(eventTarget)) {
            return;
        }
        if (parent.getFirstChildElement().isOrHasChild(Element.as(eventTarget))) {
            InputElement input = (InputElement) parent.getFirstChild();
            valueUpdater.update(input.getValue());
        }
    }       
}

As you can see I try to catch change event. And everything is ok on firefox, and chrome. When I write something in input, and tab to other cell I get following result in console:

keyup keyup keyup keyup keyup keyup keyup change keyup

One of the events is 'change' - this is what I need. Unfortunatelly on Internet Explorer I receive only:

keyup keyup keyup keyup keyup keyup keyup

There is no change event. Could anyone tell me where is the problem? Is there any way to fix it?

回答1:

In Internet Explorer, the change events don't bubble [1], so you have to listen to the event right on the input element. Other browsers all implement the HTML5 behavior where a change event bubbles [2].

I don't know the correct fix off-hand but you'd probably better use or copy from TextInputCell which already does all the hard work.

[1] http://msdn.microsoft.com/en-us/library/ie/ms536912(v=vs.85).aspx
[2] http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-change

As a side note, your render method is not safe (what if value contains a quote?) You'd probably want to use SafeHtmlUtils or a SafeHtmlTemplates (see the code of TextInputCell)

来源：https://stackoverflow.com/questions/13452172/change-browser-event-in-gwt

标签

internet-explorer

gwt

cross-browser