Question

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

任何人都可以帮助我吗？

Answer 1

对SuggestBox进行子类化肯定会起作用如果您不想创建其他类，您还可以通过直接设置属性轻松地将placeHolder添加到现有SuggestBox：

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：它仅适用于现代浏览器。为了正确地为旧浏览器实现它，以及检查第三方库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)构造函数。

Answer 3

请注意，如果在将窗口小部件添加到DOM之前调用getElement()方法，则会出现异常。因此，如果您想要一个允许您在添加到DOM之前设置占位符文本的解决方案，并在添加它后显示它，您可以挂钩到AttachEvent：

SuggestBox suggestBox = new SuggestBox();
// com.google.gwt.event.logical.shared.AttachEvent.Handler
suggestBox.addAttachHandler(new Handler() {
    @Override
    public void onAttachOrDetach(AttachEvent event) {
        if (event.isAttached()) {
            suggestBox.getElement().setAttribute("placeHolder", "SOME TEXT);
        }
    }
});

具有占位符属性的GWT SuggestBox

3 个答案: