如何在HTML表单中创建美元金额输入字段

How to create a dollar amount input field in an HTML form?

本文关键字：美元 金额 输入 字段 创建 HTML 表单      更新时间：2023-09-26

我创建了一个HTML表单，其中有一个字段需要接受美元金额。

据我所知，JavaScript不将小数视为数字成分，公认的做法是以美分为单位输入，而不是处理美元金额。

问题是，我正在编写的表单提交给一个函数，该函数读取表单输入并对其执行一些操作，并将此金额作为文本，格式为##。##并且将拒绝任何不是这种精确格式的输入。

我想知道的是：是否可以创建一个包含5个字符的文本框，并将第三个字符设置为永久小数点？

如果没有，我有没有办法使用JS验证来确保输入的格式正确？

谢谢！

我想你必须验证它。这篇文章有一些很好的正则表达式来验证美元金额：货币验证。它还有一些关于如何修剪的要点，这样用户就不能输入412.234美元或类似的东西。

您不能在HTML中创建一个固定了特定字符的文本框。也几乎没有任何必要，因为用户键入12.34（指定金额时）比键入1234并自动插入句点更自然。

您可以使用HTML5pattern属性指定所需的格式。还不是所有浏览器都支持它，但如果不支持它，它也不会造成危害，即使禁用了JavaScript，它也会执行检查。当然，您应该添加JavaScript检查，在这样一个简单的情况下，最好直接编写代码，而不是使用任何库：

<input pattern="'d?'d'.'d'd" maxlength=5 size=5 onchange="check(this)">
<script>
function check(elem) {
  if(!elem.value.match(/^'d?'d'.'d'd$/)) {
    alert('Error in data – use the format dd.dd (d = digit)');
  }
}
</script>

所使用的正则表达式同时接受dd.dd和d.dd（省略?以仅允许第一种格式）。

为了简单起见，该示例使用alert；在实际页面中，您应该使用一些中断性较小的方式向用户发出错误信号（通常，将文本写入为此类消息保留的区域），但最好的方法取决于整个页面的设计。

（使用<input type=number min=0 max=99.99 step=0.01 ...>似乎更合乎逻辑，但这会引发严重的本地化问题，浏览器对type=number的实现也相当糟糕。最重要的是，无法保证发送的数据符合所需的格式。例如，在Chrome中，使用浏览器创建的控件，数字将从0.09到0.1而不是0.10，从0.99到1而不是1.00等。）

相关文章：