IE Internet Explorer中的GWT调整textarea的大小 [英] GWT resize textarea in IE Internet Explorer

问题描述

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

How can we make a textarea resizable in IE on a GWT project?

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

A textarea can be made resizable using CSS, but this doesn't work in IE:

.gwt-TextArea {
    resize: vertical;
}

推荐答案

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

I figured out a solution using the JQuery resizable() method. In order to use it in a GWT project, I used JSNI (Javascript Native Interface) to integrate Javascript code into the GWT project.

步骤

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:

Step 1. Set the element ID:

private final String TEXT_AREA_ID = HTMLPanel.createUniqueId();

textArea.getElement().setId(TEXT_AREA_ID);

第2步.在index.html/jsp页面中添加以下内容:

Step 2. In your index.html/jsp page add this:

<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方法:

Step 3. Create your JSNI method:

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");
            }
        }
   }-*/;
}   

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

Note that you can do this if you don't want to restrict it to vertical resizing only:

textArea.resizable();

第4步.使用要调整大小的元素ID调用它:

Step 4. Call it with the id of the element to resize:

JSNIResizer.resize(TEXT_AREA_ID);

这篇关于IE Internet Explorer中的GWT调整textarea的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！