JS实现输入框仅允许数字且限制两位小数的完整方案

作者:小括号时间:2026-10-23 13:23:13浏览:663

本文介绍如何使用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控制输入框仅允许输入数字且最多保留两位小数的相关技术要点,希望对大家有所帮助!

作者最新文章