GWT 在 IE Internet Explorer 中调整文本区域的大小

Question

我们如何在 GWT 项目的 IE 中调整文本区域的大小？

可以使用 CSS 调整文本区域的大小，但这在 IE 中不起作用：

.gwt-TextArea {
    resize: vertical;
}

Answer 1

我找到了一个使用 JQuery resizable() 方法的解决方案。为了在 GWT 项目中使用它，我使用 JSNI（Javascript 本机接口）将 Javascript 代码集成到 GWT 项目中。

步骤

设置我们要在 GWT 中调整大小的小部件的元素 ID。
将您的 JQuery 库添加到 GWT 项目的起始页（index.html 或 index.jsp）。
创建 JSNI 方法。该方法将在步骤 1 中设置的元素 id 上调用 JQuery resizable() 方法。
在 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 css styles from jquery-ui.css
                textArea.addClass("ui-widget-content");
            }
        }
   }-*/;
}

请注意，如果您不想将其限制为仅垂直调整大小，则可以这样做：

textArea.resizable();

第 4 步。使用要调整大小的元素的 ID 调用它：

JSNIResizer.resize(TEXT_AREA_ID);

GWT 在 IE Internet Explorer 中调整文本区域的大小

GWT resize textarea in IE Internet Explorer

jquery

internet-explorer

gwt

resizable

jquery-ui-resizable