斌斌 (給我寫信) 原創博文（http://blog.csdn.net/binbinxyz），轉載請註明出處！
這兩天做專案時遇到一個手機號碼的表單項，簡單進行處理後我就提交測試了。原以為任務順利完成，不曾想測試卻給我反饋一個BUG，要示我修復後重新提交。

原始碼

手機號碼：<input type="text" id="phone" name="phone" maxlength="11" />
<span id="phoneError">&nbsp;</span>

<script type="text/javascript">
$(document).ready(function
 
(){
    $("#phone").bind("keyup paste", function(){
        //手機號碼只能為數字，繫結輸入和貼上事件
        if(/[^\d]+/.test(this.value)) {
            this.value = this.value.replace(/[^\d]/g, '');
        }
    }).bind("blur", function(){
        //失去焦點時校驗手機號碼格式，詳情略
    }).bind("focus", function(){
        //獲得焦點時清除錯誤提示等
    });
});
 
</script>

Bug反饋

中文輸入法狀態下，任意輸入幾個字元（比如：boke-部落格），如圖一
敲回車鍵，此時boke四個字母進入手機號碼輸入框中了，如圖二

圖一：

圖二：

解決方案

1.在html標籤中新增樣式，禁用輸入法

 style="ime-mode:disabled;"

2.結合HTML5標準事件oninput和IE專屬事件onpropertychange事件來監聽輸入框值變化

$("#phone").bind("input propertychange paste", function(){
    //手機號碼只能為數字，繫結輸入和貼上事件
 

    if(/[^\d]+/.test(this.value)) {
        this.value = this.value.replace(/[^\d]/g, '');
    }
});

相容情況：

oninput是HTML5的標準事件，對於檢測input:text,input:password,input:search和textarea這幾個元素通過使用者介面發生的內容變化非常有用，在內容修改後立即被觸發，不像onchange事件需要失去焦點才觸發。從上面表格可以看出，oninput事件在IE9以下版本不支援，需要使用IE特有的onpropertychange事件替代，這個事件在使用者介面改變或者使用指令碼直接修改內容兩種情況下都會觸發，有以下幾種情況：

• 修改了input:checkbox或者input:radio元素的選擇中狀態，checked屬性發生變化。
• 修改了input:text或者textarea元素的值，value屬性發生變化。
• 修改了select元素的選中項，selectedIndex屬性發生變化。