本文介绍如何在 HTML 的 input 文本框中通过 JavaScript 限制用户仅能输入浮点数。通过 onkeyup 和 onblur 事件触发验证函数,利用正则表达式过滤非数字字符,处理小数点唯一性及负号位置,确保输入值符合浮点数格式要求。
Input 框浮点数限制方案
在某些业务场景中,例如涉及金额计算时,往往需要限制输入框仅接受浮点数值。以下提供一种基于 JavaScript 的解决方案,用于实现这一限制功能。
在 HTML 中,可以通过为 input 元素添加 onkeyup 和 onblur 事件监听器来调用自定义的验证函数。具体代码如下: [[t1]]
核心验证逻辑
<script>
function only_num(obj){
//得到第一个字符是否为负号
var num = obj.value.charAt(0);
//先把非数字的都替换掉,除了数字和.
obj.value = obj.value.replace(/[^\d\.]/g,'');
//必须保证第一个为数字而不是.
obj.value = obj.value.replace(/^\./g,'');
//保证只有出现一个.而没有多个.
obj.value = obj.value.replace(/\.{2,}/g,'.');
//保证.只出现一次,而不能出现两次以上
obj.value = obj.value.replace('.','$#$').replace(/\./g,'').replace('$#$','.');
//如果第一位是负号,则允许添加
if(num == '-'){
obj.value = '-'+obj.value;
}
}
</script>
上述代码展示了如何在 input 框中限制输入值为浮点数的具体实现方式。该方案可供参考,旨在帮助开发者解决类似的输入验证问题。