JS控制只能输入数字并且最多允许小数点两位

下面通过一段代码给大家介绍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控制只能输入数字并且最多允许小数点两位的相关知识，希望对大家有所帮助！

赞 (0)

相关推荐

  • js监听input输入框值的实时变化实例

    1.在元素上同时绑定 oninput 和onporpertychanger事件 例: <script type="text/JavaScript"> function aa(e){alert("inputting!!");} </script> <input type="text" id="a" oninput="aa(event)" onporpertychange=&quo

  • JS验证input输入框（字母，数字，符号，中文）

    只能输入英文 <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> 只能输入英文 <input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')" onkeydown="fncKeyStop(event)" onpaste="r

  • JS实现点击下拉菜单把选择的内容同步到input输入框内的实例

    最近博主在边学flask边写测试平台,碰到一个比较常用的场景如下图所示 这里有一个输入框组,下拉菜单里面有3个选项,还有一个输入框,代码是用 bootstrap写的,代码也给大家贴出来 <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"

  • JS获得多个同name 的input输入框的值的实现方法

    先看下基于JS代码实现input密码输入框输入密码变黑点密文.具体代码如下所示: html代码 <form id="login-form" method="post" onsubmit="return checkForm()"> 输入密码<input type="password" id="input-password"> <input type="hidden&qu

  • JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金) 两位小数

    第一: 限制只能是整数 <input type = "text" name= "number" id = 'number' onkeyup= "if(! /^d+$/.test(this.value)){alert('只能整数');this.value='';}" /> 如果不是整数就直接alert 第二: 限制是两位的小数 <input type = "text" name= "price&quo

  • js监听输入框值的即时变化onpropertychange、oninput

    要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.比如即时显示输入框已经被输入的字节数,或者即时读取输入的值来进行搜索引导,也就是google的关联搜索效果等. 只要我们能捕获即时事件就能做到很多事情. 需要了解的知识 首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获. onchange在属性值改变时还必须使得当前元

  • js动态修改input输入框的type属性(实现方法解析)

    需要实现的效果:一个输入框,当输入框未获得焦点的时候,value 值为 "密码":当输入框失去焦点的时候,输入内容显示为"*****" <input name="password" type="text" id="showPwd" tabindex="2″ class="input" value="密码" /> 我们很直接会想到下面的js $(&

  • Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）

    把js的验证方法改成angular可使用的方法 AngularJS文件的写法: $scope.clearNoNum = function(obj,attr){ //先把非数字的都替换掉,除了数字和. obj[attr] = obj[attr].replace(/[^\d.]/g,""); //必须保证第一个为数字而不是. obj[attr] = obj[attr].replace(/^\./g,""); //保证只有出现一个.而没有多个. obj[attr] = o

  • js与jquery实时监听输入框值的oninput与onpropertychange方法

    本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容. 初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发.曲线救国一下,想到用 keydown 来解决.其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发

  • JS控制只能输入数字并且最多允许小数点两位

    下面通过一段代码给大家介绍JS控制只能输入数字并且最多允许小数点两位,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" name="

  • 纯JS实现只能输入数字的简单代码

    只能输入数字 <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href=&quo

  • 解析使用js判断只能输入数字、字母等验证的方法(总结)

    JS判断只能是数字和小数点0.不能输入中文1)<input onpaste="return false;" type="text" name="textfield" style="width:400px; ime-mode:disabled" value="">2)<script>function chkIt(frm){if (frm.n1.value.length>0&

  • vue.js实现只能输入数字的输入框

    在菜鸟教程里,看了vue.js的教程,看完后,练练手,就试着实现了只能输入数字的输入框.在之前的博客里,用jquery也实现了这样的功能,这里用vue.js来实现,把实现的过程记录下来 如果只是一个输入框,要实现就非常的简单了,输入框的内容和数据绑定,给数据加一个监听器就可以了,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue</t

  • 让html的text输入框只能输入数字和1个小数点(0-59之间可改)

    text 数字 function check(event) { var e = window.event || event; var target = e.srcElement || e.target; var k = e.keyCode; if(isFunKey(k)) { return true; } var c = getChar(k); if(target.value.length == '' && (c == '-' || c == '+')) { return true; }

  • asp.net中TextBox只能输入数字的最简洁的两种方法

    如下TextBox 复制代码 代码如下: <asp:textboxonkeypress="isnum()"id="TextBox1"runat="server"></asp:textbox> 1. 在页面中添加一段脚本: 复制代码 代码如下: <scriptlanguage="javascript">functionisnum(){if(event.keyCode<45||event.

  • 实现只能输入数字的input不用replace方法

    废话不多说,上代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title></title> <script type="text/javascript"> /** * 只能输入数字0-9

  • JS只能输入数字或数字和字母等的正则表达式

    JS判断只能是数字和小数点 0.不能输入中文 1)<input onpaste="return false;" type="text" name="textfield" style="width:400px; ime-mode:disabled" value=""> 2) 复制代码 代码如下: <script> function chkIt(frm){ if (frm.n1.valu

  • jQuery控制文本框只能输入数字和字母及使用方法

    在公司开发WinForm项目时,发现公司自主研发的textbox控件非常强大,可以实现"只能输入数字"."只能输入字母"和"只能输入数字和字母"的三种输入限制,这样就可以精确控制用户输入的内容范围,让"用户永远没有办法输入限定的内容范围之外的其他内容",也就是"用户即使想犯错误也没有机会",这种限制控件输入的方式给了我很大的启发,如果在web项目中也能做到这样的精确控制,那么就可以避免因为一些非法输入而造成

  • jQuery控制input只能输入数字和两位小数的方法

    前言 做为一个PHPER,难免会遇到那种表单中jQuery限制输入的问题,比如,限制空格的输入,只允许输入数字,以及小数点的控制等等,这里,我们就说一下数字的限制. jquery代码 话不多说,直接先上jQuery函数,具体的可以看注释说明,在使用这个之前,请务必保证已经提前引入了jQuery库,大家可以自己下载一个jQuery文件,然后引入,也可以查找CDN地址引入,比如在 https://www.bootcdn.cn/jquery/ 可以查找到很多版本的引入地址,直接找到你想要的引入就行.

随机推荐