实现 input 只能输入数字和小数点的四种方法

大家往往用到的都是replace方法,但是其实还有不少其他方案可选,以下列出一二供大家参考:

1、input 属性 type="number"

<input type="number" name="points" min="1" max="10" />

请使用下面的属性来规定对数字类型的限定:

属性描述
maxnumber规定允许的最大值
minnumber规定允许的最小值
stepnumber规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
valuenumber规定默认值

2、input 属性 pattern

<input type="text" pattern="\d*" maxlength="2">

但是兼容性不好,Internet Explorer 10、Firefox、Opera 和 Chrome 支持 pattern 属性。

注意:Safari 或者 Internet Explorer 9 及之前的版本不支持 <input> 标签的 pattern 属性。

3、replace 替换输入的值

只能为数字(有闪动)

<input onkeyup="value="/value.replace(/["^\d]/g,'') nbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">   

4、限制输入

只能输入 数字,小数点,减号(-) 字符(无闪动) 

<input onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && event.keyCode<48 || event.keyCode>57)) event.returnValue=false">

备注:17种正则表达式   

  1. "^\\d+$"  //非负整数(正整数 + 0)   
  2. "^[0-9]*[1-9][0-9]*$"  //正整数   
  3. "^((-\\d+)|(0+))$"  //非正整数(负整数 + 0)   
  4. "^-[0-9]*[1-9][0-9]*$"  //负整数   
  5. "^-?\\d+$"    //整数   
  6. "^\\d+(\\.\\d+)?$"  //非负浮点数(正浮点数 + 0)   
  7. "^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"  //正浮点数   
  8. "^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"  //非正浮点数(负浮点数 + 0)   
  9. "^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"  //负浮点数   
  10. "^(-?\\d+)(\\.\\d+)?$"  //浮点数   
  11. "^[A-Za-z]+$"  //由26个英文字母组成的字符串   
  12. "^[A-Z]+$"  //由26个英文字母的大写组成的字符串   
  13. "^[a-z]+$"  //由26个英文字母的小写组成的字符串   
  14. "^[A-Za-z0-9]+$"  //由数字和26个英文字母组成的字符串   
  15. "^\\w+$"  //由数字、26个英文字母或者下划线组成的字符串   
  16. "^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"    //email地址   
  17. "^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$"  //url   

最近需要对金额输入框进行限定,要求如下:

  • 只能输入数字和小数点;
  • 小数点只能有1个
  • 第一位不能是小数点
  • 第一位如果输入0,且第二位不是小数点,则去掉第一位的0
  • 小数点后保留2位
    NumberCheck(num) {
      var str = num;
      var len1 = str.substr(0, 1);
      var len2 = str.substr(1, 1);
      //如果第一位是0,第二位不是点,就用数字把点替换掉
      if (str.length > 1 && len1 == 0 && len2 != ".") {
        str = str.substr(1, 1);
      }
      //第一位不能是.
      if (len1 == ".") {
        str = "";
      }
      //限制只能输入一个小数点
      if (str.indexOf(".") != -1) {
        var str_ = str.substr(str.indexOf(".") + 1);
        if (str_.indexOf(".") != -1) {
          str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1);
        }
      }
      //正则替换,保留数字和小数点
      str = str.replace(/[^\d^\.]+/g,'')
      //如果需要保留小数点后两位,则用下面公式
      str = str.replace(/\.\d\d$/,'')
      return str;
    }

 

 

  • 13
    点赞
  • 98
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
根据提供的引用内容,你可以使用以下方法实现input只能输入数字小数点的功能: 1. 首先,你可以使用正则表达式来清除除了数字小数点之外的所有字符。可以使用`replace`函和正则表达式`/[^\d.]/g`,将非数字和非小数点的字符替换为空字符串。 2. 如果输入中包含小数点,你可以检查是否有小数点,并将输入值转换为浮点。可以使用`indexOf`函来检查输入值中是否包含小数点,并且如果输入值不为空且没有小数点,可以使用`parseFloat`函将其转换为浮点,然后再将其转换回字符串。 3. 如果有小数点限制,例如只能输入六位小,你可以在输入过程中检查小数点后的位。如果小数点后的位超过六位,则可以使用`slice`函截取小数点后的部分,并将其与零进行比较。如果小于等于零,则可以使用`replace`函将其替换为空字符串。 综上所述,你可以使用上述方法实现input只能输入数字小数点的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [关于 input 如何对输入框进行限制数字小数点,及小数点数字等问题](https://blog.csdn.net/thirteen_king13/article/details/117740028)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值