[jQuery] input 限制輸入數字

2015-12-31

13776
0

簡介：[jQuery] input 限制輸入數字

前言

第一篇的技術文章，就在美妙的誤會中誕生了

話說最近有人回報了一個Bug，input(只允許可以輸入數字，可以輸入小數)，在Chrome裡，無法輸入小數點，輸入小數點，數值整個會被清空

第一個直覺是Javascript的問題，於是先將Javascript Code註解做個測試

但發現問題依舊@@，所以不是Javascript的問題囉!?

於是來看看input有什麼特別的設定

<asp:TextBox runat="server" TextMode="Number" step="0.01" min="-9999" max="9999" ID="TextBox1" />

TextMode設定了一個新屬性"Number"，設定這個之後，使用者的瀏覽器如果有支援HTML5，就會輸出

看起來沒什麼問題，也有設step="0.01"

所以最後我決定不用HTML5的Number，單純用Javascript來擋使用者輸入非數字的值來解這個Bug

所以就有了這篇技術文章產生

解決方法

原本的Javascript Code如下：

$(document).ready(function() {
    $('#txtboxToFilter').keyup(function () {
        this.value = this.value.replace(/[^0-9\.-]/g, '');
    };
});

Code很簡單，在使用者輸入後，將非數字、小數點和負號的值替換成空白

但這Code有幾個問題

使用者游標無法左右移，當左右移游標後，游標會馬上會移到最後
使用者會看到所輸入的值，然後不符合的值被替換成空白(其實這點我是覺得還可以接受

先來改善第一個問題，會這樣是因為使用者只要輸入後，值都會被重新設定

所以前面加一個判斷，只有當使用者輸入不符合的值時，才重新設定值，改完的Code如下：

$(document).ready(function() {
    $('#txtboxToFilter').keyup(function () {
        if (/[^0-9\.-]/g.test(this.value)) {
            this.value = this.value.replace(/[^0-9\.-]/g, '');
        }
    };
});

但第二個問題，在keyup event基本上是無解，因為必須在使用者輸入之前去攔其不符合的值，

在網路上Google了一下，找到了一個不錯的範例，Code如下(增加允許輸入負數"-")：

$(document).ready(function() {
    $("#txtboxToFilter").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter, - and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 189, 190]) !== -1 ||
             // Allow: Ctrl+A, Command+A
            (e.keyCode == 65 && ( e.ctrlKey === true || e.metaKey === true ) ) || 
             // Allow: home, end, left, right, down, up
            (e.keyCode >= 35 && e.keyCode <= 40)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
});

其實網路上的範例，已經很好了，但好還要更好!!!

想要讓使用者，只能輸入一個負數"-"和一個小數點"."

所以可以在後面再加些判斷，如果使用都已經輸入-(.)，就不允許使用者再輸入-(.)，Code如下：

$(document).ready(function() {
    $("#txtboxToFilter").keydown(function (e) {
        // Allow: backspace, delete, tab, escape and enter
            if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
                // Allow: Ctrl+A, Command+A
                (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
                // Allow: home, end, left, right, down, up
                (e.keyCode >= 35 && e.keyCode <= 40)) {
                // let it happen, don't do anything
                return;
            }
            // Ensure that it is a number and stop the keypress
            if ((e.shiftKey || (e.keyCode < 48 || (e.keyCode > 57 && e.keyCode != 189 && e.keyCode != 190)))
                && (e.keyCode < 96 || e.keyCode > 105)) {
                e.preventDefault();
            }
            // 如果使用者輸入-，先判斷現在的值有沒有-，如果有，就不允許輸入
            if (e.keyCode == 189 && /-/g.test(this.value)) {
                e.preventDefault();
            }
            // 如果使用者輸入.，先判斷現在的值有沒有.，如果有，就不允許輸入
            if (e.keyCode == 190 && /\./g.test(this.value)) {
                e.preventDefault();
            }
    });
});

到這邊，其實已經差不多了，但在測試的時候，發現了一個嚴重的問題

使用者竟然可以輸入中文!!!

那怎麼辦呢?這時候冒出了星爺人生大道理「爭什麼，摻在一起做成撒尿牛丸啊，笨蛋」

和上一段Code合起來，不就可以了，使用者過得了第一關，可是過不了第二關呀XDDD

合起來的Code如下：

$(document).ready(function() {
    $("#txtboxToFilter").keydown(function (e) {
        // Allow: backspace, delete, tab, escape and enter
            if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
                // Allow: Ctrl+A, Command+A
                (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
                // Allow: home, end, left, right, down, up
                (e.keyCode >= 35 && e.keyCode <= 40)) {
                // let it happen, don't do anything
                return;
            }
            // Ensure that it is a number and stop the keypress
            if ((e.shiftKey || (e.keyCode < 48 || (e.keyCode > 57 && e.keyCode != 189 && e.keyCode != 190)))
                && (e.keyCode < 96 || e.keyCode > 105)) {
                e.preventDefault();
            }
            // 如果使用者輸入-，先判斷現在的值有沒有-，如果有，就不允許輸入
            if (e.keyCode == 189 && /-/g.test(this.value)) {
                e.preventDefault();
            }
            // 如果使用者輸入.，先判斷現在的值有沒有.，如果有，就不允許輸入
            if (e.keyCode == 190 && /\./g.test(this.value)) {
                e.preventDefault();
            }
    });

    $('#txtboxToFilter').keyup(function () {
        if (/[^0-9\.-]/g.test(this.value)) {
            this.value = this.value.replace(/[^0-9\.-]/g, '');
        }
    };
});

其實做到這邊已經很接近完美，但完美還要更完美!!!

再加入一個判斷，讓使用者輸入負數"-"的時候，只能放在最前面

最後的Code如下：

$(document).ready(function() {
    $("#txtboxToFilter").keydown(function (e) {
        // Allow: backspace, delete, tab, escape and enter
            if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
                // Allow: Ctrl+A, Command+A
                (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
                // Allow: home, end, left, right, down, up
                (e.keyCode >= 35 && e.keyCode <= 40)) {
                // let it happen, don't do anything
                return;
            }
            // Ensure that it is a number and stop the keypress
            if ((e.shiftKey || (e.keyCode < 48 || (e.keyCode > 57 && e.keyCode != 189 && e.keyCode != 190)))
                && (e.keyCode < 96 || e.keyCode > 105)) {
                e.preventDefault();
            }
            // 如果使用者輸入-，先判斷現在的值有沒有-，如果有，就不允許輸入
            if (e.keyCode == 189 && /-/g.test(this.value)) {
                e.preventDefault();
            }
            // 如果使用者輸入.，先判斷現在的值有沒有.，如果有，就不允許輸入
            if (e.keyCode == 190 && /\./g.test(this.value)) {
                e.preventDefault();
            }
    });

    $('#txtboxToFilter').keyup(function () {
        if (/[^0-9\.-]/g.test(this.value)) {
            this.value = this.value.replace(/[^0-9\.-]/g, '');
        }

        if (/-/g.test(this.value) && !/^-/g.test(this.value)) {
            this.value = this.value.replace(/-/g, '');
        }
    };
});

到這邊，Code已經完成得差不多了，但如果你還想再更上層樓，你可以在focusout event裡，再判斷使用者輸入的是不是一個完整的數值

像是"-"，"."，"-."之類，都可以提示使用者輸入一個完整的數值

於是我再度進行測試，突然發現驚人的事實!!!

就是HTML5的Number，其實在Chrome是沒有問題的，是Javascript的問題

我因為瀏覽器的快取，而誤判了>_<

結論

請在網頁下來加入以下提示訊息

請使用IE10及以上的版本或支援HTML5的瀏覽器，來達到最佳顯示效果

然後快樂的使用HTML5的新項目Number，簡單、方便、好用!!!

參考

http://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery

jQuery

回首頁