输入数字类型美元符号

Question

我有一个要求输入美元金额的表格，但是如果用户在数字前加一个美元符号，该表格将不允许发送，因为它被设置为type =“ number”。

有没有一种方法可以让用户以type =“ number”键入美元符号（$）并发送表格而没有问题？

码：

<label>Monthly Budget</label>
<input name="budget" type="number" placeholder="$400.00" required data-errormessage-value-missing="Uh oh, somethings wrong!" data-errormessage-type-mismatch="Uh oh, somethings wrong!">

Answer 1

只需在输入字段之前表示符号即可，因此他们无需再次添加它。 货币符号不是用代码处理的，而是添加到视口中以供用户即时显示。

<label>Monthly Budget</label>
<span class="input">&#36;<input name="budget" type="number" placeholder="400.00" required data-errormessage-value-missing="Uh oh, somethings wrong!" data-errormessage-type-mismatch="Uh oh, somethings wrong!"></span>

例

输入类型=数字-参考

Answer 2

让用户在type="number"字段中type="number"美元符号并发送没有问题的表单的唯一方法是使用键盘事件处理程序（例如onkeyup ）拦截（使用JavaScript）用户输入，删除美元符号，并使用setCustomValidity('')清除状态。 由于键盘事件处理（和识别输入了哪个字符）在浏览器中会有所不同，因此需要格外小心。 更重要的是，这将导致可用性较差：用户可以键入“ $ 42”，但看到的“ $”消失，并且可能会感到非常困惑。

将美元符号放在该字段的前面是避免用户输入美元符号（而不是解决它）的问题的一种方法（并非完全可靠）。 请注意，还有其他一些问题的代码，也如用钱的具体数额，作为一个占位符（用value ，如果你想设置一个初始值），而不是让任何美分，相反的是400.00暗示。 更好的主意：

<label for="budget">Monthly Budget</label>
<input id="budget" name="budget" type="number" 
placeholder="xxx.xx" 
required
step="0.01"
title="Amount of money in numbers">

（如果您不希望在预算中使用美分，则可以忽略step属性，将其默认设置为1，然后忽略placeholder属性，因为可能没有合适的值。）

或者，使用input type="text"和适当的pattern属性，例如

<input id="budget" name="budget" type="text" 
placeholder="xxx.xx" 
required
title="Amount of money in numbers"
pattern="\$?(\d)+(\.\d\d)?">

（允许分但不要求分）。 请注意，这将使（在支持的浏览器上）400.000或400.5之类的输入无效，这可能很好。 这种方法意味着在表单数据处理中，您将需要处理可选的前导“ $”，这当然通常很简单。