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接口。

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

Answer 1

HasText位约为InputGroupAddon，而不是Anchor。 “纯文本上下文”（通过实现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"）。

如何附加到gwtbootstrap 3 InputField的链接

1 个答案: