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在谷歌時正常顯示，但是在火狐瀏覽器下就會出現問題了：

　　那麼問題就找到原因了，通過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的自定義指令的實現：代碼地址。