限制input框只能输入数字且保留两位小数

2024年3月13日 130次阅读 来源: weixin_44883460

之前作者也在网上查了很多关于只能输入数字的，但是大部分都不能输入小数，所以这次作者分享一下


<input  placeholder="请输入0.01-20之间数值" id='money' maxlength="5" style="-webkit-user-select:auto;" />

//maxlength 是限制input框输入字段长度的
//-webkit-user-select:auto 解决mui中的input框在ios手机上使用时内容输入不进去而设置的。

// js中写入：

//实现只能输入两位小数的功能
$("input ").on("keypress ", function(e) { 
       return (/[\d]|\.{1,2}/.test(String.fromCharCode(event.keyCode)))
   });

上述方法有可能在一些安卓手机上不起作用

网络上搜到的其他的一些方法：大部分都是通过监听键盘按下，弹起等事件用正则表达式判断来做的，作者自己也试了很多种，但是大部分都在苹果和安卓手机上不是很兼容。且苹果的软键盘上弹出时会自带已经形成的汉字或字母，如果用户直接选择上面的话监听事件是监听不到的，仍有瑕疵。
就在作者愁眉不展时，同事提供了另一种思路，监听input框的change事件，然后利用正则表达式，但是change事件是在input框失去焦点时才会触发，还是灵活，最后改成监听input框的input事件来实时监听框内内容才解决问题，具体代码如下：

 $("input").on("input", function(e) {
        var reg = /^[0-9]+(.[0-9]{0,2})?$/;
        if (!reg.test($(this).val())) {
            $(this).val('');
        };
    原文作者：weixin_44883460
    原文地址: https://blog.csdn.net/weixin_44883460/article/details/101016925
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞