允许在<input type=“数字”>中输入两位小数
允许在<input type=“数字”>中输入两位小数
提问于 2015-12-03 11:55:55
我有一个<input type="number">，我想将用户的输入限制为纯数字或小数位数不超过2位的数字。
基本上，我要求的是价格输入。
我想避免使用正则表达式。有办法做到这一点吗？
<input type="number" required name="price" min="0" value="0" step="any">Stack Overflow用户
发布于 2021-09-06 13:57:15
我也有同样的要求，但在检查了所有这些答案后，我意识到没有内置的支持来阻止用户键入特定数量的小数点。在验证十进制数的输入时，step="0.01"很有用，但它仍然不会阻止用户键入任何小数。在我的例子中，我想要一个防止用户输入无效小数的解决方案。因此，我创建了自己的自定义JavaScript函数，它将强制用户执行任何小数规则。有一个轻微的性能问题，但对于我的场景，有一个非常小的延迟，以确保用户没有键入无效的小数位是可以的。对于想要防止用户在输入中键入无效十进制值的人来说，它可能很有用。
如果您愿意，您可以将此解决方案与step="0.01"一起使用。您可以在element oninput事件上使用以下函数。如果性能对你很重要，那么考虑在onchange事件上使用它，而不是在oninput上。并且请指定input in data-decimal属性中允许的最大小数位数。它可以有从0到任何数字的值。
function enforceNumberValidation(ele) {
if ($(ele).data('decimal') != null) {
// found valid rule for decimal
var decimal = parseInt($(ele).data('decimal')) || 0;
var val = $(ele).val();
if (decimal > 0) {
var splitVal = val.split('.');
if (splitVal.length == 2 && splitVal[1].length > decimal) {
// user entered invalid input
$(ele).val(splitVal[0] + '.' + splitVal[1].substr(0, decimal));
}
} else if (decimal == 0) {
// do not allow decimal place
var splitVal = val.split('.');
if (splitVal.length > 1) {
// user entered invalid input
$(ele).val(splitVal[0]); // always trim everything after '.'
}
}
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" data-decimal="0" oninput="enforceNumberValidation(this)" placeholder="No decimal places" value="" />
<input type="number" data-decimal="2" oninput="enforceNumberValidation(this)" placeholder="2 decimal places" value="" />
<input type="number" data-decimal="5" oninput="enforceNumberValidation(this)" placeholder="5 decimal places" value="" />
我可能会使用RegExp来识别无效值，但我也必须恢复输入中的更改。所以我决定不使用RegExp。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34057595
复制相关文章
相似问题
腾讯云开发者
