input只能输入数字_在input中限制只可以输入数字且去重

一、需求：

    input中限制只可以输入数字且限制长度、去重

二、遇见问题：

     在input中，设置成type=“number”类型，maxlength会失效

三、解决方案：

    1、在input 使用type="text"类型，使用js正则表达式，达到限制数字的输入；

    2、使用filter过滤器去重

    3、把现有的数字转成数组，使用数组遍历方式，把数组的每一项重新赋值，使用Array.from方式去重，但是这种方法会出现按字母键和空白键的时候会把字母转化成0(所以不太推荐)

四、代码附上

(一)、使用js正则表达式和filter过滤器去重(代码少且不会出现太多问题)

//input 只允许输入数字,且去重    isCheckNumber(key) {        //使用正则        let vals = this.slI[key].replace(/[^\d]/g,'');        //去重        let resVal = [].filter.call(vals,(s,i,o)=>o.indexOf(s)==i).join('');        this.slI[key] = resVal;    },

(二)、现有的数字转成数组方式

//html vue项目的写法"text" :maxlength=placeholder="请输入..." @on-keyup="keyup(this,'hundred')" style="width: 300px">input>//js代码keyup(e,key){      let val = this[key];      if ( typeof val === 'string'){        let arr = val.split('') ; //arr是数组        this.forEach(arr,function(item,index){            if(isNaN(item)){              arr.splice(index,1);             }            else {              arr[index] = +arr[index]            }        });        if(arr.length === 0) {          this[key] = '';          return          }        arr = Array.from(new Set(arr));        this[key] = Number(arr.join(''));      }    },

以上仅是个人遇到困难，然后通过度娘找到解决方案，网上各种解决方案，找到最终的解决方案(作为个人笔记)。