JS实现输入框仅允许数字且限制两位小数的完整方案
本文介绍如何使用JavaScript限制输入框仅能输入数字并保留两位小数。通过结合onkeyup和onblur事件,利用正则表达式过滤非数字字符及多余小数点。特别解决了长按字母键导致焦点丢失后内容残留的问题,确保数据纯净,避免使用原生number类型带来的样式兼容性问题。
JS限制输入数字与两位小数的实现方案
以下通过一段代码详细介绍如何在JavaScript中实现输入框仅允许输入数字,并限制最多保留两位小数,具体实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" name="je" onblur="clearNoNum(this)"/>元
<script type="text/javascript">
function clearNoNum(obj) {
obj.value = obj.value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
if (obj.value.indexOf(".") < 0 && obj.value != "") {//以上已经过滤,此处控制的是如果没有小数点,首位不能为类似于 01、02的金额
obj.value = parseFloat(obj.value);
}
if (!obj.value || obj.value == '0' || obj.value == '0.0' || obj.value == '0.00') {
alert('退款金额不能为空');
return;
}
// 正常得话继续调后端接口
}
</script>
</body>
</html>
补充说明:JavaScript如何限制input输入框仅允许输入数字
代码中的实现逻辑如下:
<input type="text"
class="form-control match-rotation-input"
maxlength="3"
οnkeyup="value=value.replace(/[^\d]/g,'')"//输入时校验
οnblur="value=value.replace(/[^\d]/g,'')"//失去焦点时校验
ng-model="schedule.round"
placeholder="请输入数字">
首先添加了一行οnkeyup="value=value.replace(/[^\d]/g,'')"
此处主要运用正则表达式进行字符过滤,处理逻辑较为简洁,同时设置了提示语:placeholder="请输入数字"。
然而,为何还需要添加οnblur="value=value.replace(/[^\d]/g,'')"这一行代码呢?
因为在实际操作中发现,如果用户持续按住字母键,随后点击鼠标使input元素失去焦点,
会导致input框中意外出现字母字符。为了避免此类问题,后续又加入了οnblur="value=value.replace(/[^\d]/g,'')"
注意:此前曾考虑将type属性修改为number类型,但因生成的浏览器默认样式不符合设计要求,故最终采用正则表达式进行匹配验证。
总结
上述内容介绍了JS控制输入框仅允许输入数字且最多保留两位小数的相关技术要点,希望对大家有所帮助!
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
