如何将 link 附加到 gwtbootstrap 3 InputField

Question

我想在 html 中执行此操作：

<div class="input-group" id="name">
    <input type="text" class="form-control" name="name" placeholder="Name">
    <span class="input-group-addon"><a href="#" class="none" id="name">None</a></span>
</div>

我在 GWT 中尝试这个 Bootstrap:

<b:InputGroup>
    <b:TextBox b:id="name" placeholder="Name"/>
    <b:InputGroupAddon>
        <b:Anchor ui:field="noName" text="None"/>
    </b:InputGroupAddon>
</b:InputGroup>

但是我得到了错误：

Illegal child <b:Anchor text='Name' ui:field='noName'> in a text-only context. Perhaps you are trying to use unescaped HTML where text is required, as in a HasText widget?: <b:InputGroupAddon> (:56)

为什么？ b:Anchor 实现了 HasText 接口。

我的目标是添加一个link，当用户点击输入时将填充值NONE

Answer 1

HasText 位是关于 InputGroupAddon，而不是 Anchor。 "Text-only context"（通过实施 HasText 暗示）意味着您只能将文本放入该小部件。通过 text 属性 (<b:InputGroupAddon text='Name' />) 或在标签内 (<b:InputGroupAddon>Name</b:InputGroupAddon>) - 这些声明是等效的。您不能在这样的上下文中放置未转义的 HTML 或小部件。

对于您的用例，我建议使用按钮（如 Bootstrap 文档所建议的那样）：

<b:InputGroup>
  <b:TextBox b:id="name" placeholder="Name" />
  <b:InputGroupButton>
    <b:Button ui:field="noName" text="None" />
  </b:InputGroupButton>
</b:InputGroup>

请参阅 the demo 以了解它的实际应用。您可以轻松地根据需要设置样式（可能没有文本，只有 icon = "ERASER"）。

如何将 link 附加到 gwtbootstrap 3 InputField

How to append a link to gwtbootstrap 3 InputField

gwt

gwtbootstrap3