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获取QueryString的方法小结
Feb 28 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
详解原生JS回到顶部
Mar 25 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
Python中random模块生成随机数详解
2016/03/10 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
大学生党员自我评价范文
2014/04/09 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
大学生赌博检讨书
2014/09/22 职场文书
小学班主任事迹材料
2014/12/17 职场文书
大学军训决心书
2015/02/05 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python