只允許使用整數和十進制數字textbow jquery（不使用正則表達式）

Question

我想在文本輸入字段中僅允許數字。 所以這就是我所做的：

$(document).on("keypress", ".numeric", function (e) {

    if(($(this).attr("class")).indexOf("price") >= 0) {

        if (e.which != 8 && e.which != 0 && e.which != 190 && (e.which < 48 || e.which > 57)) {

            //display error message
            $(this).css("background-color", "rgb(245, 203, 203)");
            $(this).css("border", "1px solid #FF0000");    
            $(this).attr("placeholder", "Enter only numbers");
            return false;
        }
    }
}

我添加了e.which != 190以允許十進制數字，但它不起作用。 如果事件12.9.32. ，它將允許用戶輸入12.9.32.類的12.9.32. 這是錯誤的。

您對此有任何想法嗎？ 謝謝

Answer 1

我正在使用以下代碼來確切地描述您的內容。 它將僅允許一個小數點（。或，）

$elm.on('keypress', function(e){
    //Only allow 0-9, '.' and backspace (charCode 0 in Firefox)
    if(e.charCode == 46 || e.charCode == 44){
        var currentContents = $input.val();
        return !(currentContents.indexOf(',') !== -1 || currentContents.indexOf('.') !== -1);
    }
    return (e.charCode >= 48 && e.charCode <= 57) || e.charCode === 0;
})

Answer 2

遵循關於注釋的建議，我使用Regex表達式解決了我的問題，使其具有獨立於鍵盤類型的通用代碼，因此我發布了此解決方案，以防您感興趣或對某人有所幫助。

$(document).on("keypress", ".numeric", function (e) {
    if(($(this).attr("class")).indexOf("price") >= 0) {

        var price = String.fromCharCode(e.which);

        //if the letter is not digit then display error and don't type anything
        if(/^[0-9]+\.?[0-9]*$/.test($(this).val() + price) == false) {
            $(this).css("background-color", "rgb(245, 203, 203)");
            $(this).css("border", "1px solid #FF0000");    
            $(this).attr("placeholder", "Enter only numbers");
            return false;
        }
        else {
            $(this).css("background-color", "#fff");
            $(this).removeAttr( "placeholder");
        }
    }
});

我使用Keypress不允許用戶輸入不遵守我的正則表達式的內容。 由於使用keypress事件，尚未寫入輸入的字符，但我們不能使用$(this).val()來獲取整個輸入值，使用它我們只會得到舊的輸入值，這就是為什么我們應該使用： String.fromCharCode(e.which)捕獲輸入的字符，然后將其與輸入$(this).val() + price的舊值連接

謝謝。

Answer 3

這是實現僅整數html文本字段的最強方法（將integerOnly類應用於輸入元素）：

var valKeyDown;
var valKeyUp;


function integerOnly(e) {
    e = e || window.event;
    var code = e.which || e.keyCode;
    if (!e.ctrlKey) {
        var arrIntCodes1 = new Array(96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 8, 9, 116);   // 96 TO 105 - 0 TO 9 (Numpad)
        if (!e.shiftKey) {                          //48 to 57 - 0 to 9 
            arrIntCodes1.push(48);                  //These keys will be allowed only if shift key is NOT pressed
            arrIntCodes1.push(49);                  //Because, with shift key (48 to 57) events will print chars like @,#,$,%,^, etc.
            arrIntCodes1.push(50);
            arrIntCodes1.push(51);
            arrIntCodes1.push(52);
            arrIntCodes1.push(53);
            arrIntCodes1.push(54);
            arrIntCodes1.push(55);
            arrIntCodes1.push(56);
            arrIntCodes1.push(57);
        }
        var arrIntCodes2 = new Array(35, 36, 37, 38, 39, 40, 46);
        if ($.inArray(e.keyCode, arrIntCodes2) != -1) {
            arrIntCodes1.push(e.keyCode);
        }
        if ($.inArray(code, arrIntCodes1) == -1) {
            return false;
        }
    }
    return true;
}

$('.integerOnly').keydown(function (event) {
    valKeyDown = this.value;
    return integerOnly(event);
});

$('.integerOnly').keyup(function (event) {          //This is to protect if user copy-pastes some character value ,..
    valKeyUp = this.value;                          //In that case, pasted text is replaced with old value,
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {   //which is stored in 'valKeyDown' at keydown event.
        $(this).val(valKeyDown);                    //It is not possible to check this inside 'integerOnly' function as,
    }                                               //one cannot get the text printed by keydown event 
});                                                 //(that's why, this is checked on keyup)

$('.integerOnly').bind('input propertychange', function(e) {    //if user copy-pastes some character value using mouse
    valKeyUp = this.value;
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {
        $(this).val(valKeyDown);
    }
});