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 相关文章推荐
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 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过滤危险html代码
2008/08/18 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
python 容器总结整理
2017/04/04 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
师范教师毕业鉴定
2014/01/13 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
主题班会开场白
2015/06/01 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js