Question

我有一个收取金额的文本框，即100美元。

我的文本框中已经有一个$符号：

<g:TextBox ui:field="fee">$</g:TextBox>

我想要的是用户永远不能在我的textBox中删除/编辑$ sign，并且只能在$ sign后输入金额，

这可能吗？

Answer 1

您最好将$作为标签放在文本框之外。如果您希望它看起来好像在文本框中，您可以设置包含<span>的{{1}}，<div>或<label>以及带框架的文本框，并删除文本框的边框。使用UiBinder I18N，您可以轻松地在框的任一侧移动货币标签。

仅供参考，这就是Google在下拉按钮的GMail，Reader和Groups搜索框中所做的工作。

像：

区域设置可以将消息定义为<ui:style> .container { border: 1px solid gray; } .inputbox { border: none; } </ui:style> <g:HTMLPanel tag="label" addStyleNames="{style.container}"> <ui:msg> $ <ui:ph name="inputbox"><g:TextBox addStyleNames="{style.inputbox}" /></ui:ph> </ui:msg> </g:HTMLPanel>，以便在输入框的右侧放置{0} €。

Answer 2

这应该可以使用事件

button.addKeyPressHandler(new KeyPressHandler() {
  public void onKeyPress(KeyPressEvent event) {
    TextBox b = (TextBox)event.getSource();
    if (!b.getValue().startsWith("$")) {
      b.setValue("$" + b.getValue());
    }
  }
});

虽然基于css的解决方案看起来应该更好：

在输入框上放置带有$符号的lavel。

Label l = new Label("$");
TextBox b = new TextBox();
l.getElement().addClassName("dollarlabel");
b.getElement().addClassName("dollarinput");
RootPanel.get().add(b);
RootPanel.get().add(l);

和一些CSS样式

.dollarlabel {
  position: relative;
  float: left;
}
.dollarinput {
  margin-left: -10px;
  padding-left: 10px;
}

如何使我的文本框的第一个字符保持不变或固定

2 个答案: