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 相关文章推荐
js模拟实现Array的sort方法
Dec 11 Javascript
JavaScript 应用技巧集合[推荐]
Aug 30 Javascript
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
JS常用算法实现代码
Nov 14 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
解决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之第六天
2006/10/09 PHP
PHP4在Windows2000下的安装
2006/10/09 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
python两种遍历字典(dict)的方法比较
2014/05/29 Python
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
浅析Python中的for 循环
2016/06/09 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
python实现的自动发送消息功能详解
2019/08/15 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
golang 实现菜单树的生成方式
2021/04/28 Golang
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫