javascript - 只允许整数和十进制数 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.错误的内容。

你对此有什么想法吗？谢谢

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

按照有关评论的建议，我使用正则表达式解决了我的问题，以获得独立于键盘类型的通用代码，我将发布此解决方案以防有人感兴趣或对某人有所帮助。

$(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不允许用户输入不尊重我的正则表达式的内容。由于使用按键事件，输入的字符还没有被写入，我们不能用$(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);
    }
});