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 相关文章推荐
jQuery实现列表的全选功能
Mar 18 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
Vue封装的组件全局注册并引用
Jul 24 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
微信小程序实现聊天室功能
Jun 14 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中使用TCPDF生成PDF文档实例
2014/07/01 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
js+css实现打字效果
2020/06/24 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
Python判断文件和字符串编码类型的实例
2017/12/21 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
python如何为创建大量实例节省内存
2018/03/20 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
Python中如何导入类示例详解
2019/04/17 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
基于python监控程序是否关闭
2020/01/14 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
公司年会抽奖活动主持词
2014/03/31 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
科学发展观标语
2014/10/08 职场文书
法律意见书范文
2015/06/04 职场文书
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python