Question

我有一个RichTextArea

 private RichTextArea richTextArea;

我正在尝试捕获这样的粘贴事件：

DOM.sinkEvents((com.google.gwt.user.client.Element) richTextArea.getElement(), com.google.gwt.user.client.Event.ONPASTE);
DOM.setEventListener((com.google.gwt.user.client.Element) richTextArea.getElement(), new EventListener(){
  @Override public void onBrowserEvent(Event event) {
     switch (event.getTypeInt()) {
        case Event.ONPASTE: Window.alert("hey");break;
     }
   }
});

但它不起作用，当我在richTextArea上粘贴文本时，不会触发警报。

知道如何捕获此粘贴事件吗？

谢谢！

Answer 1

您无法将事件添加到RichTextArea，实际上是iframe，但是它的正文。

虽然您可以使用jsni，但我会使用gwtquery因为它的简单性：

// First attach the widget to the DOM
RootPanel.get().add(richTextArea);

// We only can bind events to the content, once the iframe document has been created, 
// and this happens after it has been attached. Note that richtTextArea uses a timeout
// to initialize, so we have to delay the event binding as well
$(richTextArea).delay(1, lazy().contents().find("body").bind(Event.ONPASTE, new Function(){
  @Override public boolean f(Event e) {
    Window.alert("OnPaste");
    return true;
  }
}).done());

Answer 2

您是否看过RichTextArea的呈现HTML？它是iframe而不是实际的textarea input类型。它在body元素下设置用户输入。这就是为什么你不会陷入onpaste事件的原因。例如，如果您在onpaste小部件上收听TextArea，则可以正常使用。

private static class MyTextArea extends TextArea
    {
        public MyTextArea()
        {
            sinkEvents(Event.ONPASTE);              
        }

        @Override
        public void onBrowserEvent(Event event)
        {
            if(event.getTypeInt() == Event.ONPASTE)
            {
                Window.alert("text pasted !");
            }
            super.onBrowserEvent(event);
        }
    }

也许你可以使用JSNI将处理程序绑定到那个iframe body元素并获取该事件的回调（但是还没试过）

Answer 3

为了完整起见，本机（JSNI）解决方案将类似于：

setPastehandler(richTextArea.getElement());

private native void setPasteHandler(Element e) /*-{
    e.contentDocument.onpaste = function (event) {
        alert("pasted!");
    };
}-*/;

GWT捕获RichTextArea或IFrame中的事件

3 个答案: