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 注意事项与常用语法小结
Jun 07 Javascript
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
js动态设置div的值下例子
Oct 29 Javascript
jquery常用操作小结
Jul 21 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
js实现点击按钮随机生成背景颜色
Sep 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
一段php加密解密的代码
2007/07/16 PHP
php实现的双向队列类实例
2014/09/24 PHP
php绘制一条弧线的方法
2015/01/24 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
JavaScript基本对象
2007/01/11 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
Windows下为Python安装Matplotlib模块
2015/11/06 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python中adb有什么功能
2020/06/07 Python
python开发入门——列表生成式
2020/09/03 Python
Python项目打包成二进制的方法
2020/12/30 Python
旅游专业毕业生自荐书
2014/06/30 职场文书
信访维稳工作汇报
2014/10/27 职场文书
考研英语复习计划
2015/01/19 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
宇宙与人观后感
2015/06/05 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
html粘性页脚的具体使用
2022/01/18 HTML / CSS
python ConfigParser库的使用及遇到的坑
2022/02/12 Python