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

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

1、input 属性 type="number"

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

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

属性	值	描述
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value	number	规定默认值

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种正则表达式

"^\\d+$"　　//非负整数（正整数 + 0）
"^[0-9]*[1-9][0-9]*$"　　//正整数
"^((-\\d+)|(0+))$"　　//非正整数（负整数 + 0）
"^-[0-9]*[1-9][0-9]*$"　　//负整数
"^-?\\d+$"　　　　//整数
"^\\d+(\\.\\d+)?$"　　//非负浮点数（正浮点数 + 0）
"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"　　//正浮点数
"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"　　//非正浮点数（负浮点数 + 0）
"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"　　//负浮点数
"^(-?\\d+)(\\.\\d+)?$"　　//浮点数
"^[A-Za-z]+$"　　//由26个英文字母组成的字符串
"^[A-Z]+$"　　//由26个英文字母的大写组成的字符串
"^[a-z]+$"　　//由26个英文字母的小写组成的字符串
"^[A-Za-z0-9]+$"　　//由数字和26个英文字母组成的字符串
"^\\w+$"　　//由数字、26个英文字母或者下划线组成的字符串
"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"　　　　//email地址
"^[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;
    }

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

猜你喜欢