JS控制只能输入数字并且最多允许小数点两位


Posted in Javascript onNovember 24, 2019

下面通过一段代码给大家介绍JS控制只能输入数字并且最多允许小数点两位,具体代码如下所示:

<!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>

ps:js如何限制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控制只能输入数字并且最多允许小数点两位的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
理解jquery事件冒泡
Jan 03 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 #Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 #Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 #Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 #Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 #Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 #Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 #jQuery
You might like
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
js继承实现方法详解
2016/12/16 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
js简易版购物车功能
2017/06/17 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
es6数值的扩展方法
2019/03/11 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
出国留学介绍信
2014/01/13 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
出生证明范本
2015/06/15 职场文书
运动会5000米加油稿
2015/07/21 职场文书
MySQL查询日期时间
2022/05/15 MySQL