GWT在IE Internet Explorer中调整textarea的大小

Question

如何在GWT项目中使IE中的textarea可调整大小？

可以使用CSS使textarea可调整大小，但这在IE中不起作用：

.gwt-TextArea {
    resize: vertical;
}

Answer 1

我想出了一个使用JQuery resizable（）方法的解决方案。为了在GWT项目中使用它，我使用JSNI（Javascript Native Interface）将Javascript代码集成到您的GWT项目中。

脚步

1. 设置我们要在GWT中调整大小的窗口小部件的元素ID。
2. 将您的JQuery库添加到GWT项目的启动页面（index.html或index.jsp）。
3. 创建JSNI方法。该方法将在步骤1中设置的元素id上调用JQuery resizable（）方法。
4. 在GWT.create（）或uiBinder.createAndBindUi（this）方法之后的某个时刻调用代码中的JSNI方法。

例

步骤1.设置元素ID：

private final String TEXT_AREA_ID = HTMLPanel.createUniqueId();

textArea.getElement().setId(TEXT_AREA_ID);

第2步。在index.html / jsp页面中添加：

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

第3步。创建您的JSNI方法：

public class JSNIResizer
{
   public static native void resize(String textAreaId) /*-{
      // Internet Explorer. IE 11 uses 'trident'.
      var isIE = ($wnd.navigator.userAgent.match(/msie/i) || $wnd.navigator.userAgent.match(/trident/i));

        // Only apply this to IE browsers
        if (isIE) {

            var textArea = $wnd.$("#" + textAreaId);

            if (textArea) {
                textArea.resizable({
                    handles : 'n, s' // handle vertical resizing only.
                });

                // Optional: Adds a css style from jquery-ui.css
                textArea.addClass("ui-widget-content");
            }
        }
   }-*/;
}   

请注意，如果您不想将其限制为仅垂直大小调整，则可以执行此操作：

textArea.resizable();

步骤4.使用要调整大小的元素的id调用它：

JSNIResizer.resize(TEXT_AREA_ID);