Question

我试图将文本字段中的键盘输入限制为数字（0-9）和减号（ - ）（仅限复制/粘贴等）和删除键。

该代码适用于限制数字和删除键，但它不适用于减号（ - ）部分。

用户应该只能在他们的号码前输入减号（ - ），如果他们试图输入1那么 - 它不应该输入 - 但是现在 - 部分根本不起作用。

我认为这段代码是问题，但它看起来很好 - 它会检查文本输入是否为空白，如果是，则输入减号（ - ）。

// Only enter the minus sign (-) if the user enters it first
if (unicode == 45 && input.value == "") {
    return true;
}

我的完整代码：

<input type="text" maxlength="10" id="myInput">

<script>
var input = document.getElementById("myInput");

input.onkeypress = function(e) {
   var unicode = e.keyCode;

    if (unicode == 49 || unicode == 50 || unicode == 51 || unicode == 52 || unicode == 53 || unicode == 54 || unicode == 55 || unicode == 56 || unicode == 57 || unicode == 48) {
        return true;
    } else {
        return false;   
    }

    // Only enter the minus sign (-) if the user enters it first
    if (unicode == 45 && input.value == "") {
        return true;
    }
};
</script>

Answer 1

操作顺序，在您询问减号之前，您在0-9返回false。移动减号如果阻止在0-9以上的块上，那么你是黄金

<input type="text" maxlength="10" id="myInput">

<script>
var input = document.getElementById("myInput");

input.onkeypress = function(e) {
   var unicode = e.keyCode;

    // Only enter the minus sign (-) if the user enters it first
    if (unicode == 45 && input.value == "") {
        return true;
    }

    if (unicode == 49 || unicode == 50 || unicode == 51 || unicode == 52 || unicode == 53 || unicode == 54 || unicode == 55 || unicode == 56 || unicode == 57 || unicode == 48) {
        return true;
    } else {
        return false;   
    }


};
</script>

Answer 2

我建议：

var input = document.getElementById("myInput");

input.onkeypress = function(e) {
    switch (e.keyCode){
        case 45:
            return this.value.length == 0 ? true : false;
            break;
        case 48:
        case 49:
        case 50:
        case 51:
        case 52:
        case 53:
        case 54:
        case 55:
        case 56:
        case 57:
            return true;
            break;
        default:
            return false;
            break;
    }
};

JS Fiddle demo

原始代码失败的原因仅仅是您在评估if条件之前已经从函数返回。在此版本中，如果按下-键，则三元组会返回true如果没有当前值（因此-将是第一个字符），或false如果有已经是一个值（因此-不会是第一个字符。）

Answer 3

除了IE之外，

keyCode是所有浏览器中的错误属性。您需要在其他浏览器中使用charCode或which。使用它你将获得字符代码，并可以使用正则表达式来测试键入的字符。您还需要在浏览器中允许不可打印的按键，例如删除，退格键和箭头键，以便为这些键发送keypress个事件。

演示：http://jsfiddle.net/7XLqQ/3/

var input = document.getElementById("myInput");

input.onkeypress = function(e) {
    e = e || window.event;
    var charCode = (typeof e.which == "number") ? e.which : e.keyCode;

    // Allow non-printable keys
    if (!charCode || charCode == 8 /* Backspace */ ) {
        return;
    }

    var typedChar = String.fromCharCode(charCode);

    // Allow numeric characters
    if (/\d/.test(typedChar)) {
        return;
    }

    // Allow the minus sign (-) if the user enters it first
    if (typedChar == "-" && this.value == "") {
        return;
    }

    // In all other cases, suppress the event
    return false;
};

这里没有考虑一种情况，即当用户将插入符号放在输入的开头并键入减号时。为此，您需要检测插入位置。以下是一些跨浏览器代码，用于检测插入符号是否位于输入的开头，改编自this answer：

function isCaretAtTheStart(el) {
    if (typeof el.selectionEnd == "number") {
        // Modern browsers
        return el.selectionEnd == 0;
    } else if (document.selection) {
        // IE < 9
        var selRange = document.selection.createRange();
        if (selRange && selRange.parentElement() == el) {
            // Create a working TextRange that lives only in the input
            var range = el.createTextRange();
            range.moveToBookmark(selRange.getBookmark());
            return range.moveEnd("character", -el.value.length) == 0;
        }
    }
    return false;
}

以下是经过修改的演示：http://jsfiddle.net/7XLqQ/5/

最后，我最喜欢的JavaScript关键事件资源，它会告诉你需要知道的一切：http://unixpapa.com/js/key.html

Answer 4

我建议：

$(".class_name").keypress(function (e) {
   if (e.which != 8 && e.which != 0 && e.which != 45 && (e.which < 48 || e.which > 57)) {
      return false;
   }
});

文本输入 - 将输入限制为数字（0-9）和减号（ - ） - 不按预期工作

4 个答案: