HTML Input 框限制输入浮点数的 JavaScript 实现

作者:流萤

时间:2026-10-22

浏览:611

本文介绍如何在 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 框中限制输入值为浮点数的具体实现方式。该方案可供参考,旨在帮助开发者解决类似的输入验证问题。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章