如何将占位符添加到GWT文本输入字段

时间:2012-05-04 14:40:19

标签: html gwt

是否知道Google Web Toolkit文本输入窗口小部件在字段为空时会在字段内显示消息?

E.g。一个名字字段,它会说:'输入你的名字',当用户开始输入时,标签将被移除以显示输入的文字。

你会怎么做?

丹尼尔

3 个答案:

答案 0 :(得分:31)

这在textarea中为我工作:

yourInputField.getElement().setPropertyString("placeholder", "enter your first name");

我认为这是一个HTML5功能。

答案 1 :(得分:1)

With this solution you can define any additional properties in binder xml:

The solution:

public class MorePropertiesTextArea extends TextArea {
    private String moreProperties;

    public MorePropertiesTextArea() {}

    public void setMoreProperties(String moreProperties) {
        for (Entry<String, String> entry : parse(moreProperties).entrySet()) {
            getElement().setAttribute(entry.getKey(), entry.getValue());
        }
        this.moreProperties = moreProperties;
    }


    public String getMoreProperties() {
        return moreProperties;
    }

    private Map<String, String> parse(String moreProperties) {
        String[] pairStrings = moreProperties.split(";");
        HashMap<String, String> map = new HashMap<>();
        for (String pairString : pairStrings) {
            String[] pair = pairString.split("=");
            if(pair.length != 2)
                throw new IllegalArgumentException("at " + pair + " while parsing " + moreProperties + 
                        ". Use format like: 'spellcheck=false; placeholder=Write something here...'");
            map.put(pair[0].trim(), pair[1]);
        }
        return map;
    }

}

UI Binder xml:

<p2:MultiLineTextArea ui:field="taMultiLine" styleName="form-control muliLine"  
            moreProperties="spellcheck=false; placeholder=Write something here... " />

Result html:

<textarea class="form-control muliLine" spellcheck="false" placeholder="Write something here..."></textarea>

答案 2 :(得分:1)

我会选择一个UI框架来完成这一切(以及更多)。

我在所有项目中都使用GWT-Bootstrap 3,我对它非常满意:https://github.com/gwtbootstrap3/gwtbootstrap3

如果您不了解bootstrap,最好快速浏览一本bootstrap3,这样您就可以了解Grid系统和其他内容的工作原理。使用gwt-bootstrap 3时比你有头脑。

您可以看到的另一个是https://github.com/GwtMaterialDesign/gwt-material,它是Google Material的包装器。我自己没有用,但我认为这不是一个糟糕的选择。