bug的產生和修改

上週臨近週末休息的時候，一個同事跑過來了，對我說：“阿倫啊，有一個頁面出問題了，火狐瀏覽器所有的input都沒法輸入了。”我一聽，是不是你給加了什麼屬性，讓input輸入框只讀了啊。看了一下程式碼，很正常的一個輸入框，並且CSS寫的也很正常。

<input id="ipt-message" type="text" placeholder="請輸入身高"/>

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

12345

$("input[type='text']").keypress(function(e){if(!String.fromCharCode(e.keyCode).match(/[0-9\.]/)){returnfalse;}})

雖然當時沒驗證這段程式碼的情況，但是直覺告訴我找到原因了。我把這段程式碼複製出來還原了一下，大概意思就是所有的文字輸入框在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; } } })

12345678

$("input[type='text']").keypress(function(e){varcode=e.charCode||e.originalEvent.charCode；if(code!=0){if(!String.fromCharCode(code).match(/[0-9\.]/)){returnfalse;}}})

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, '') })

123456789101112131415161718192021222324

varEventUtil={addHandler:function(element,type,handler){if(element.addEventListener){//DOM2級element.addEventListener(type,handler,false);}elseif(element.attachEvent){//DOM1級element.attachEvent("on"+type,handler);}else{element["on"+type]=handler;//DOM0級}},removeHandler:function(element,type,handler){//類似addHandlerif(element.removeEventListener){element.removeEventListener(type,handler,false);}elseif(element.detachEvent){element.detachEvent("on"+type,handler);}else{element["on"+type]=null;}}}vartextbox=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, '') }

123	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>

12345678910111213141516

<input id="ipt"type="text"v-model="iptVal"/><script>varqwe=newVue({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, '') } } })

123456789101112131415161718

Vue.directive('limit',{update:function(el){el.onkeypress=function(e){varcode=e.charCode;if(code!=0){if(!String.fromCharCode(code).match(/[0-9\.]/)){returnfalse;}}}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=""/>

1	<input id="ipt"type="text"v-model="iptVal"v-limit=""/>

附完整程式碼，基於Vue的自定義指令的實現：程式碼地址。