主页 / 网络编程 /

jQuery控制input只能输入数字和两位小数的方法

网络编程 2021-07-04 15:50www.168986.cn编程入门
这篇文章主要介绍了jQuery控制input只能输入数字和两位小数的相关知识，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

前言

做为一个PHPER，难免会遇到那种表单中jQuery限制输入的问题，比如，限制空格的输入，只允许输入数字，以及小数点的控制等等，这里，我们就说一下数字的限制。

jquery代码

话不多说，直接先上jQuery函数，具体的可以看注释说明，在使用这个之前，请务必保证已经提前引入了jQuery库，大家可以自己下载一个jQuery文件，然后引入，也可以查找CDN地址引入，比如在 可以查找到很多版本的引入地址，直接找到你想要的引入就行。

<script>
  // 格式化限制数字文本框输入，只能数字或者两位小数
  function format_input_num(obj){
    // 清除"数字"和"."以外的字符
    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("$#$",".");
    // 只能输入两个小数
    obj.value = obj.value.replace(/^(\-)(\d+)\.(\d\d).$/,'$1$2.$3');
  }
</script>

函数的直接用法之onkeyup

在input表单输入中，限制最多只能保留两位小数点，其他自动抹掉；这里会用到onkeyup事件，也就是onkeyup事件会在键盘按键被松开时发生，也就是，这个时候调用我们的函数，来处理已输入的内容。

<input type="text" onkeyup="format_input_num(this)" value="" size="10" />元

函数的直接用法之blur

除了上面的监控键盘事件外，还可以通过监控表单的焦点事件来实现，也就是，表单都有获得焦点事件focus和失去焦点事件blur，我们只需要在失去焦点的时候，调用我们的format_input_num函数就可以了，具体如下

<input type="text" onblur="format_input_num(this)" value="" size="10" />元

或者不在表单中直接绑定方法，而是去jQuery中通过查找元素节点，然后单独绑定相应的事件，并执行相关函数

<input type="text" value="" size="10" id="money" />元
<script>
  $("#money").off('blur').on('blur', function(){
    format_input_num(this);
  });
</script>

其他输入限制

限制只能输入数字的写法，也就是，只能输入0-9的数字

<input type="text" onkeyup='this.value=this.value.replace(/\D/gi,"")' />

限制只能输入数字、字母和横线"-"，其中字母包括大小写

<input type="text" onkeyup='value=value.replace(/[^A-Za-z0-9\-]+/g,"")' />

了，还有其他很多校验规则，可以自己根据实际需求进
行修改和尝试一下

以上所述是长沙网络推广给大家介绍的jQuery控制input只能输入数字和两位小数的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，长沙网络推广会及时回复大家的！

上一篇：Vue模板语法中数据绑定的实例代码 下一篇：微信小程序云开发详细教程

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by