如何使文本字段只接受数字和两位小数答案

【问题标题】：how to make a text field to accept only numbers, and two decimal places如何使文本字段只接受数字和两位小数
【发布时间】：2017-12-12 17:41:04
【问题描述】：

我需要让一个文本字段只接受数字和小数点，并且默认为两位小数。我从这里的搜索中得到了这个代码。它仅适用于接受数字。我需要让它接受小数点，并默认为两位小数。

<input type="text" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));" />

谢谢

【问题讨论】：

你可以使用 HTML5 number 输入... <input type="number" step="0.01" />
Restricting input to textbox: allowing only numbers and decimal point的可能重复

标签： javascript jquery

【解决方案1】：

您可以使用正则表达式来限制可以在字段中输入的内容。

举个例子：

<input type="text" pattern="(?:[01]|2(?![4-9])){1}\d{1}:[0-5]{1}\d{1}">

您可以访问像 regexlib.com 这样的网站，它可以帮助您构建和测试您正在寻找的正则表达式类型。

可能有更好或更雄辩的方法，但这对我来说既简单又有效。

【讨论】：

【解决方案2】：

留给 HTML5：

<input type="number" step="0.01">

另外，请记住服务器端验证（例如在 PHP 中）。不要试图强制某些缺失的按键，或者不要覆盖默认浏览器行为。这不是用户友好的。

如果你按 A 后什么都没有显示，你会怎么做？你会去商店买新键盘吗？

在这种情况下，请尝试向用户提供一个线索，即您期望的数据类型。为用户提供一个工具 (type="number") 以在手机上显示最佳键盘布局。

但不要试图“做得更好”。在那种情况下，它意味着更糟。

关于这个主题的更多信息：

Is there a float input type in HTML(5)?

【讨论】：

【解决方案3】：

如果您想始终显示 2 位小数，您可以在更改时重新格式化输入以四舍五入并显示为 2 位小数：

function isNumberKey(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode;
  if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57)))
    return false;
  return true;
}

$("#twodecimals").change(function() {
  var format = parseFloat(Math.round($(this).val() * 100) / 100).toFixed(2);
  $(this).val(format);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="twodecimals" onkeypress="return isNumberKey(event)" />

【讨论】：