具有占位符属性的GWT SuggestBox

Question

我正在寻找一种方法来<g:SuggestBox>在GWT中指定元素内的占位符属性.我知道该<input>元素允许指定该属性,但我决定切换到SuggestBox元素而不是输入元素.

谁能帮我？

Answer 1

子类化SuggestBox肯定会工作.
如果您不想创建其他类,也可以SuggestBox通过直接设置属性轻松地将placeHolder添加到现有类:

SuggestBox suggestBox = new SuggestBox();
suggestBox.getElement().setAttribute("placeHolder", "SOME TEXT);

Answer 2

您应该创建自己的自定义SuggestBox小部件,之后可以为其设置占位符属性.例如:

public class CustomSuggestBox extends SuggestBox {


 private String placeHolderText = "";

  public String getPlaceHolderText() {
   return placeHolderText;
  }

  public void setPlaceHolderText(String text) {
    placeHolderText = text;
    getTextBox().getElement().setAttribute("placeHolder", placeHolderText);
  }
}

因此,您可以在UI绑定器中设置此属性.

<widgets:CustomSuggestBox ui:field="cSuggestBox"  placeHolderText="someText" />

PS:它仅适用于现代浏览器.为了正确地为旧浏览器实现它,以及检查第三方lib wogwt,它有TextBoxWithPlaceholder 类,它扩展了TextBox:

 /**
 * A text box that displays a placeholder string when empty
 * 
 * <h3>CSS Style Rules</h3>
 * <ul class='css'>
 * <li>.wogwt-TextBoxWithPlaceholder { primary style }</li>
 * <li>.wogwt-TextBoxWithPlaceholder-placeholder { dependent style set when 
 * the placeholder is displayed }</li>
 * </ul>
 */  

在这种情况下,您可以将此TextBoxWithPlaceholder实例发送给SuggestBox(SuggestOracle oracle, TextBoxBase box)构造函数.