Question

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

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

app.get('/tweet',(req,res)=>{
    tweetData.find((err,data)=>{
        if(err){
            return res.json({success: false, error: err});
        }
        return res.json({success: true, data:data});
    });
})

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 a css style from jquery-ui.css
                textArea.addClass("ui-widget-content");
            }
        }
   }-*/;
}

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

textArea.resizable();

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

JSNIResizer.resize(TEXT_AREA_ID);

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

1 个答案: