仅限数字的键码 | javascript

Question

我有这段代码。根据这里的键码 http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00000520.html

这段代码应该可以工作，但出于某种原因，我将这些字符视为真实。

eiadfghcb.

 function validate(event) {
            var keycode =  event.keyCode; 
            if (!(keycode == 8 || keycode == 46) && (keycode < 48 || keycode > 57) && (keycode < 96 || keycode > 105)) {
                return false;
            }
        }

html:

  <asp:TextBox ID="txtImp" runat="server" Height="23px" Width="80"  onkeypress="return validate(event)" onkeyup="calc()"/>

Answer 1

以下代码应该适合您：

function validate(event) {
    var code = event.code;

    if (typeof code !== "undefined") {
        var
            codeBeginning = code.substr(0, code.length - 1);

        if (code === "Period" || code === "NumpadDecimal" || code === "Backspace" || ((codeBeginning === "Digit" || codeBeginning === "Numpad") && !parseInt(code.substr(code.length - 1)).isNaN())) { // key pressed is one of the "."-keys, the "Backspace"-key or one of the number-keys.
            return true;
        }

        return false;
    }

    var keyCode = event.which || event.keyCode;

    if (keyCode === 8 || keyCode === 46 || (keyCode >= 48 && keyCode <= 57)) {
        return true;
    }

    return false;
}

解释为什么您的代码不起作用。

当按下的键既不是小数点键也不是BACKSPACE 键时，if 语句 !(keycode == 8 || keycode == 46) 中的第一个条件确实会评估为真。

但是，第二个和第三个条件会相互冲突。这可以通过以下示例显示：
用户按下Numpad 2-键（在我的情况下）导致50。该值确实符合第二个条件，50 既高于48 又低于57，但它不符合第三个条件，因为50 低于96。

由于第二个和第三个条件都必须导致true，并且总是有两个条件之一会导致false，因此代码永远不会按照您的意愿执行。

免责声明

我之前的回答说KeyBoardEvent.keyCode 不可靠，导致无法在我的机器上捕获正确的密钥。

即使我现在无法重现此问题，我仍然建议您仅在绝对必要时使用KeyBoardEvent.keyCode（因为KeyBoardEvent.keyCode 的文档确实指出它是特定于实现的），并使用KeyBoardEvent.which尽可能。

解释为什么我的代码有效。

由于KeyBoardEvent.keyCode 严重依赖其浏览器实现，我选择尽可能多地使用它，而不是使用KeyBoardEvent.which。

但是，由于这两个属性都已被弃用，我还使用了KeyBoardEvent.code 来确保解决方案符合最新的KeyBoardEvent 规范。

因此，我的解决方案在可用时使用KeyBoardEvent.code，因为它没有被弃用或特定于实现。如果KeyBoardEvent.code 不可用，则使用KeyBoardEvent.which，因为它比KeyBoardEvent.keyCode 更一致。最后，如果KeyBoardEvent.which（如旧浏览器中的情况，例如 Internet Explorer 8），则必须使用KeyBoardEvent.keyCode。

Answer 2

问题：

看看你的第三个条件：

keycode < 96 || keycode > 105 //Where keycode is NOT between 96-105

现在查看您输入的字符的 ASCII 码：

a: 97
b: 98
c: 99
d: 100
e: 101
f: 102
g: 103
h: 104

您的代码失败的原因现在应该很明显了 - 您已经包含一个非常明确地忽略您声称“不工作”的字符的条件。

---

keyCode 与 charCode：

谈到keyCode，您会遇到一些跨浏览器问题。出于这个原因，您可能需要考虑同时检查keyCode 和/或 charCode，因为它们都适用于一组特定的浏览器。确保我们获得一致的值的一种简单方法是执行以下操作：

var keycode = event.keyCode || event.charCode;

如果event.keyCode 不起作用，则将使用charCode。

---

解决办法：

如果您只是想忽略我指出的问题，那么只需将其删除：

if (!(keycode == 8 || keycode == 46) && (keycode < 48 || keycode > 57)) {
    return false;
}

话虽如此，您的问题根本没有说明您的愿望是什么。它只是说你所拥有的“不适用于所提到的角色”。

---

其他信息：

作为旁注，如果我没有指出您的代码并不完全... 友好，我会失职，因为没有更好的词。解决这个问题的一种优雅方法是用命名函数替换条件列表，这样目的和结果就更容易辨别了，如下所示：

不好：

if (sunny || not raining and warm || not(cloudy and raining) || not cold) 

好：

if (weatherIsNice(...))

---

适用于您的情况，可能类似于

function characterIsAllowed(keycode) {
    if (!(keycode == 8 || keycode == 46) && (keycode < 48 || keycode > 57) && (keycode < 96 || keycode > 105)) {
         return true;
    } else {
        return false;
    }
}

function validate(event) {
    var keycode = event.keyCode || event.charCode;
    if (characterIsAllowed(keycode)) {
        return false;
    }
}

或者，进一步简化...

function characterIsAllowed(keycode) {
    return (!(keycode == 8 || keycode == 46) && (keycode < 48 || keycode > 57) && (keycode < 96 || keycode > 105))
}

function validate(event) {
    var keycode = event.keyCode || event.charCode;
    return !characterIsAllowed(keycode);
}