DIV CSS 佈局教程網

現在有一個需求如下圖：

產品經理說Card Number只能讓輸入數字（中間的空格是格式自加的，也是用js實現的），有時候我腦海中出現了個聲音，啥玩意，加個type=number不就行了，事實發現圖樣圖森破了，先不說type=number後面會有個上下標(雖然用css可干掉)，但是這個類型是支持科學輸入法的，就是小數點和e這樣的是可以輸入的，於是乎只能用其他的方式了，後來想用檢索到輸入了非數字就干掉，但是這樣還是能輸入，想法被打回，於是乎最終采用了鍵盤輸入控制的辦法，其實很簡單，代碼如下：

  var isNumber=function(keyCode){
        // 數字
        if (keyCode >= 48 && keyCode <= 57) {
          return true;  
        }
          // 小數字鍵盤
        if (keyCode >= 96 && keyCode <= 105) {
          return true;
        }
          //tab Backspace, del, 左右方向鍵
        if (keyCode == 9||keyCode == 8|| keyCode == 32 || keyCode == 46 || keyCode == 37 || keyCode == 39) {
          return true;
        }
        return false
      }

所謂鍵盤輸入控制就是根據鍵盤輸入的keycode來判斷輸入的是什麼類型，即獲取按下的鍵盤按鍵Unicode值，鍵盤上每個按鍵對應的keycode是固定的，網上有很多對照表，我這裡就不貼上去了，每一次按鍵監測到對應的keycode然後對照是否合法，需要注意的是這裡合法的不僅是數字，還有上下左右tab和空格方向鍵，不能禁用用戶的操作指令，怎麼樣，看起來很簡單吧。