Question

我有一个表格，其中一行要求一美元金额，但是如果用户在该表格的前面加上一个美元符号，则该表格不会发送，因为它设置为type =＆＃34 ;数＆＃34;

有没有办法让用户在类型=＆＃34;数字＆＃34;中输入美元符号（$）？表格发送没有问题？

代码：

<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>

Example

<强> input type=number - Reference

Answer 2

让用户在type="number"字段中输入美元符号并让表单发送没有问题的唯一方法是使用键盘事件处理程序（例如{{1}）拦截（使用JavaScript）用户输入}，删除美元符号，并使用onkeyup清除状态。这需要一些小心，因为键盘事件处理（以及识别输入的字符）因浏览器而异。更重要的是，它会导致可用性差：用户可以键入“$ 42”，但会看到“$”消失，并且可能会非常混乱。

将美元符号放在字段前面是避免用户输入的美元符号问题（而不是解决它）的一种方式（不完全可靠）。请注意，代码还存在其他问题，例如使用特定金额作为占位符（如果您希望设置初始值，则使用setCustomValidity('')）并且不允许任何分数，这与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">属性，将其默认为1，并省略step属性，因为可能没有合适的值它）。

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

pattern

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

输入数字类型美元符号

2 个答案:

Example