bug的產生和修改
上週臨近週末休息的時候，一個同事跑過來了，對我說：“阿倫啊，有一個頁面出問題了，火狐瀏覽器所有的input都沒法輸入了。”我一聽，是不是你給加了什麼屬性，讓input輸入框只讀了啊。看了一下程式碼，很正常的一個輸入框，並且CSS寫的也很正常。
<input id="ipt-message" type="text" placeholder="請輸入身高" />複製程式碼但是執行之後發現無法輸入任何東西，包括字母、符號、數字（後來實驗發現，輸入了漢字之後可以輸入符號和數字，這個暫時未發現原因）。那麼問題就來了，肯定是js部分的問題了。當時我就猜大概是做了限制，但是當時我還是比較相信同事寫的程式碼的。我就面對著幾個js檔案一個一個的看，一個幾千行程式碼，直到我看到了下面這段程式碼：
$("input[type=`text`]").keypress(function (e) {
if (!String.fromCharCode(e.keyCode).match(/[0-9.]/)) {
return false;
}
}) 複製程式碼雖然當時沒驗證這段程式碼的情況，但是直覺告訴我找到原因了。我把這段程式碼複製出來還原了一下，大概意思就是所有的文字輸入框在keypress事件觸發這個函式，使用正則驗證輸入的情況，只能輸入小鼠點和數字。但是當執行的時候問題出現了，bug出現了，那麼問題找到了，就是這四行程式碼導致的，在那堆js程式碼中去掉這四行之後就沒有了問題。
之後我研究出錯的原因時發現，e.keyCode在谷歌時正常顯示，但是在火狐瀏覽器下就會出現問題了：
|
谷歌瀏覽器 |
火狐瀏覽器 |
IE11瀏覽器 |
|
|
按鍵“a” |
keydown：keyCode為65，charCode為0 keypress：keyCode為97，charCode為97 keyup：keyCode為65，charCode為0 |
keydown：keyCode為65，charCode為0 keypress：keyCode為0，charCode為97 keyup：keyCode為65，charCode為0 |
keydown：keyCode為65，charCode為0 keypress：keyCode為97，charCode為97 keyup：keyCode為65，charCode為0 |
| 按鍵“1” |
keydown：keyCode為49，charCode為0 keypress：keyCode為49，charCode為49 keyup：keyCode為49，charCode為0 |
keydown：keyCode為49，charCode為0 keypress：keyCode為0，charCode為49 keyup：keyCode為49，charCode為0 |
keydown：keyCode為49，charCode為0 keypress：keyCode為49，charCode為49 keyup：keyCode為49，charCode為0 |
| 按鍵“Backspace” |
keydown：keyCode為8，charCode為0 keypress未觸發 keyup：keyCode為8，charCode為0 |
keydown：keyCode為8，charCode為0 keypress：keyCode為8，charCode為0 keyup：keyCode為8，charCode為0 |
keydown：keyCode為8，charCode為0 keypress為觸發 keyup：keyCode為8，charCode為0 |
那麼問題就找到原因了，通過String.fromCharCode(e.keyCode)是無法做到相容火狐瀏覽器返回按鍵值，因為當輸入數字和字母時，其keyCode都為0。
因此，我修改了一下這個程式碼：
$("input[type=`text`]").keypress(function (e) {
var code = e.charCode || e.originalEvent.charCode；
if (code != 0) {
if (!String.fromCharCode(code).match(/[0-9.]/)) {
return false;
}
}
}) 複製程式碼originalEvent是jquery對原生event屬性的封裝。“code != 0”這個判斷是在火狐瀏覽器下對是否按鍵為“Backspace”的判斷，如果沒有這個判斷，會導致Backspace鍵無法使用，無法刪除這個情況的發生。
談限制輸入框輸入型別
其實無論是使用哪種方式來限制輸入框的輸入的型別，都離不開keyup、keypress、keyup和比較少見的textInput四個事件來觸發。其中，前三個為各個瀏覽器共同支援的，而textInput僅有IE9+，Safari和Chrome，這也正式比較常見的瀏覽器（或其核心）。前三個事件為鍵盤事件，最後一個為文字事件。其觸發的順序為keydown(按鍵按下)——>keypress(按鍵值插入文字)——>textInput(按鍵值插入文字)——>keyup(按鍵彈起)。textInput和keypress的發生很相似，但二者還是有區別：任何可以獲得焦點的元素都可以觸發keypress事件，但只有可編輯區域才能觸發textInput事件。textInput事件只會在使用者按下能夠輸入實際字元的鍵時才會觸發，而keypress事件則在按下那些能夠影響文字顯示的鍵時也會觸發（比如退格鍵）。
在實際的操作中，我們會發現在輸入中文的時候，只用按鍵事件對其進行觸發限制輸入框的操作體驗非常不好。比如上面的程式碼，只在keypress事件觸發限制，當我們輸入法切換在中文時，按下字母之後按空格鍵或者“shift”鍵，會發現我們的限制失效了。
原生js
因此為了更好的體驗，我們需要更多的事件觸發限制，達到我們的目的。因此，我們應在觸發keypress後在對即將插入文字框的值進行一邊過濾。就拿上文的條件只能輸入數字和小數點來說，我們需要在textIput事件發生時判斷一下文字框的value值，使用正則進行一下過濾。程式碼如下：
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) { //DOM2級
element.addEventListener(type, handler, false);
} else if (element.attachEvent) { //DOM1級
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler; //DOM0級
}
},
removeHandler: function (element, type, handler) { //類似addHandler
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
}
var textbox = document.getElementById(`input`);
EventUtil.addHandler(textbox, `textInput`, function (e) {
e.target.value = e.target.value.replace(/[^0-9.]/g, ``)
})複製程式碼利用事件監聽把繫結textIput事件，當觸發時再對其value過濾一下。結果還是不錯的：
但是在上文提到過，textInput屬性對火狐瀏覽器無相容，因此，我們就需要使用keyup對其進行代替（但效果不好）：
textbox.onkeyup=function (e) {
e.target.value = e.target.value.replace(/[^0-9.]/g, ``)
}複製程式碼附完整程式碼，原生js實現：程式碼地址。
Vue的自定義指令
簡單少量的input我們可以使用雙向繫結後，watch到變化進行限制，如下：
<input id="ipt" type="text" v-model="iptVal"/>
<script>
var qwe=new Vue({
el:`#ipt`,
data(){
return{
iptVal:``
}
},
watch:{
iptVal(val){
this.iptVal=val.replace(/[^0-9.]/g, ``)
}
}
})
</script>複製程式碼但是，當面對大量的input輸入框，我們更向往用簡單的方式去解決，甚至簡單到只寫一個指令（比如v-limit）就可以。這樣，我們就需要用到自定義指令的知識(可參考我的部落格《Vue的土著指令和自定義指令》)。
這個value是隨著輸入不斷更新的，因此，我們需要選用update這個鉤子函式：
Vue.directive(`limit`, {
update: function (el) {
el.onkeypress = function (e) {
var code = e.charCode;
if (code != 0) {
if (!String.fromCharCode(code).match(/[0-9.]/)) {
return false;
}
}
}
el.addEventListener(`textInput`, function (e) {
e.target.value = e.target.value.replace(/[^0-9.]/g, ``)
})
el.onkeyup = function (e) {
e.target.value = e.target.value.replace(/[^0-9.]/g, ``)
}
}
})複製程式碼此時，呼叫的方式特別簡單，只需要增加“v-limit”這個指令即可。
<input id="ipt" type="text" v-model="iptVal" v-limit />複製程式碼附完整程式碼，基於Vue的自定義指令的實現：程式碼地址。