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; } } }

 這個方案是直接對比按鍵值，雖然有點不是很好，但是畢竟能解決問題，限制除“.”外其他特殊字符的輸入！