如何格式化 vaadin 文本字段以 $x,xxx 格式显示货币

Question

我想将 vaadin 文本字段与聚合物一起使用，并且我希望在用户键入时将文本自动格式化为货币格式，例如 $4,500 或 $10,000。我只能获取前缀和数字，但不能获取逗号。

<vaadin-text-field prevent-invalid-input pattern="[0-9]*" style = "width: 6em"><div slot="prefix">$</div> </vaadin-text-field>。

Answer 1

我相信vaadin-text-field 没有任何直接属性或方法可以做到这一点。我通过为它制作一个组件包装器来解决这个问题。基本上，它会在用户输入时验证输入并在正确的位置添加逗号。它也兼容. 作为输入。使用属性comma 打开和关闭该功能。回购链接如下。

https://github.com/binhbbbb/comma-field

Answer 2

您可以使用 vaadin 插件中的NumeralFieldFormatter TextField Formatter：

new NumberFieldFormatter(",", ".", 3).extend(myNumberField);