GWT带有占位符属性的SuggestBox

Question

我正在寻找一种方法，在GWT中在<g:SuggestBox>元素内指定占位符属性。 我知道<input>元素允许指定该属性，但我决定改用SuggestBox元素而不是输入元素。 有人能帮我吗？

- auino

---

您可以通过此解决方案定义任何其他属性。 - Daniel Hári

Answer 1

可以通过子类化SuggestBox来实现功能。
如果您不想创建额外的类，也可以通过直接设置属性将placeHolder轻松添加到现有的SuggestBox中:

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

- Ümit

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 Binder中设置此属性。

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

注意：此功能仅适用于现代浏览器。如果要在旧版浏览器中正确实现它，请查看第三方库wogwt，它具有扩展TextBox的TextBoxWithPlaceholder类：

 /**
 * 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) 构造函数。

- Jama A.

---

我不确定这段代码 getTextBox().getElement().getStyle().setProperty("placeholder", placeHolderText); 是否正确。我认为应该按照下面的描述来实现。 - user1545858

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);
        }
    }
});

- Jeff Evans