h5 调起ios数字键盘的坑，限制特殊字符输入方案

 最近有个需求是利率只允许输入数字和小数点，用以下

<input type="number" pattern="[0-9]*">

在ios会调起数字键盘，但是左下角竟然是空不是“.”！ 

 

这个坑相信很多移动端h5开发会遇到，需支持小数点那就不能调起这种键盘了，那只能调起以下键盘

 <input type="number">

但是问题又来了ios系统的type="number"竟然不能自动限制输入特殊字符！

那只能对这个键盘输入做限制特殊字符输入了！有以下两种方案限制（用的vue框架）

方案一：

<input type="number" @keydown="preventNotNumber($event)">

methods: {
    isBackspace(keyCode) {
      return keyCode === 8;
    },
    isDot(keyCode) {
      return keyCode === 46 || keyCode === 110 || keyCode === 190;
    },
    isNumber(keyCode) {
      return (keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105);
    },
    preventNotNumber(event) {
         var keyCode = event. keyCode;
         if (!this.isBackspace(keyCode) && !this.isDot(keyCode) && !this.isNumber(keyCode)) {
              // 其他按键
              event.preventDefault();
              event.stopPropagation();
              return false;
         }
     }
}

但是这个方案还有坑，有些键值竟然是相同的！例如键“2”和键“@”的keyCode都是50！

 

 方案二：

<input type="number" @keydown="preventNotNumber($event)">

methods: {
    isBackspace(keyValue) {
         return keyValue === 'Backspace';
    },
    isDot(keyValue) {
         return keyValue === '.';
    },
    isNumber(keyValue) {
         return (keyValue >= 0 && keyValue <= 9);
    },
    preventNotNumber(event) {
         var keyValue = event.key;
         if (!calculator.isBackspace(keyValue) && !calculator.isDot(keyValue) && !calculator.isNumber(keyValue)) {
              // 其他按键
              event.preventDefault();
              event.stopPropagation();
              return false;
         }
     }
}

 这个方案是直接对比按键值，虽然有点不是很好，但是毕竟能解决问题，限制除“.”外其他特殊字符的输入！