"变化与QUOT; GWT中的浏览器事件 [英] "Change" browser event in GWT

问题描述

我在GWT中创建表格，其中一列包含有输入的单元格。我希望在输入文字改变时获得信息。在我的单元格中，我重载了 render（）和 onBrowserEvent（）方法。以下是代码：

  public HourPickerCell（）{
 super（change，keyup）; 
 
 $ b @Override 
 public void render（Context context，String value，SafeHtmlBuilder sb）{
 if（value == null）{
 return ; 
} 
 sb.appendHtmlConstant（< input class = \hourPicker \type = \text \value = \+ value +\> < /输入>中）; 
 
 
 $ b @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（））; 
 
 
 
 code 
 $ b $ p $你可以看到我尝试捕捉更改事件。在Firefox和Chrome上一切正常。当我在输入中写入某些内容时，并在其他单元格中选中时，我在控制台中得到以下结果： 
 
 
  keyup 
 keyup 
 keyup 
 keyup 
 keyup 
 keyup 
 keyup 
 change 
 keyup  
 
 
其中一个事件是改变 - 这是我需要的。不幸的是我只能收到： 
 
 
  keyup 
 keyup 
 keyup 
 keyup 
 keyup 
 keyup 
 keyup 
  
 
 
 
没有更改事件。 
谁能告诉我问题在哪里？有什么方法可以修复它？
解决方案
在Internet Explorer中，更改事件不会冒泡[1]，因此您必须在输入元素上正确地收听事件。其他浏览器都实现了HTML5行为，其中更改事件泡泡[2]。
 
 
 
我不知道正确的手动修复，但你可能会更好地使用或复制从 TextInputCell ，它已经完成了所有的辛苦工作。
 
 
 
 [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  
 
 
 
 
 
 
请注意，您的呈现方法是不安全的（如果 value 包含一个引号？）你可能想要使用 SafeHtmlUtils 或 SafeHtmlTemplates （请参阅 TextInputCell 的代码）
 
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?
解决方案
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)

                        
这篇关于&QUOT;变化与QUOT; GWT中的浏览器事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！