RichTextArea 或 IFrame 中的 GWT 捕获事件答案

【问题标题】：GWT capture event in RichTextArea or in IFrameRichTextArea 或 IFrame 中的 GWT 捕获事件
【发布时间】：2013-05-25 12:47:18
【问题描述】：

我有一个 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 上粘贴文本时，不会触发警报。

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

谢谢！

【问题讨论】：

标签： events gwt copy-paste richtextarea

【解决方案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());

【讨论】：

【解决方案2】：

你看过 RichTextArea 的渲染 HTML 吗？它是 iframe 不是实际的 textarea input 类型。它在body 元素下设置用户输入。所以这就是为什么你不会沉没onpaste 事件。例如，如果您在TextArea 小部件上收听onpaste，它就可以正常工作。

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 正文元素并获取该事件的回调（虽然还没有尝试过）

【讨论】：

【解决方案3】：

为了完整起见，本机 (JSNI) 解决方案类似于：

setPastehandler(richTextArea.getElement());

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

【讨论】：