jQuery:如何过滤按键事件上的非字符键?

I tried searching but unsure of what terms to look for.

我试着搜索，但不确定要找什么词。

I'm using jQuery and would like to use the keypress event in a textbox, but prevent all non-printable characters (ie. Enter, ESC, arrow keys, backspace, tab, ctrl, insert, F1-F12, etc) from triggering the event.

我正在使用jQuery，并希望在文本框中使用按键事件，但是要防止所有不可打印的字符(例如)。从触发事件中输入、ESC、箭头键、后退、制表符、ctrl、插入、F1-F12等等。

Is there an easy way to determine if it is printable?

是否有一种简单的方法来确定它是否可以打印?

4 个解决方案

#1

The selected answer for this question is not complete. It does not handle the case where a character key is being pressed in combination with a modifier key (e.g. CTRL-A).

这个问题的选定答案并不完整。它不处理将字符键与修饰符键(例如CTRL-A)结合使用的情况。

Try, for example, typing CTRL-A using firefox with the following code. The current answer will consider it as a character:

例如，尝试使用firefox输入下列代码CTRL-A。目前的答案将把它视为一个字符:

HTML:

HTML:

<input placeholder="Try typing CTRL-A in Firefox" style="width: 200px"/>

JavaScript:

JavaScript:

$("input").keypress(function (e) {
    if (e.which !== 0) {
        alert(String.fromCharCode(e.which));
    }
});

http://jsfiddle.net/4jx7v/

http://jsfiddle.net/4jx7v/

Note: an alert won't be fired if using some browsers (such as Chrome), since they don't fire a keypress event for non-character inputs.

注意:如果使用某些浏览器(如Chrome)，则不会触发警报，因为它们不会为非字符输入触发按键事件。

A better solution might be:

更好的解决办法可能是:

HTML:

HTML:

<input placeholder="Try typing CTRL-A in Firefox" style="width: 200px"/>

JavaScript:

JavaScript:

$("input").keypress(function (e) {
    if (e.which !== 0 &&
        !e.ctrlKey && !e.metaKey && !e.altKey
    ) {
        alert(String.fromCharCode(e.which));
    }
});

http://jsfiddle.net/hY5f4/

http://jsfiddle.net/hY5f4/

In this case, the alert is only being fired when A is pressed, not CTRL-A for all browsers.

在这种情况下，只有当A被按下时才会发出警报，而不是所有浏览器的CTRL-A。

#2

<script>
    $("input").keypress(function (e) {
        if (e.which !== 0 &&
            !e.ctrlKey && !e.metaKey && !e.altKey) {
            alert(String.fromCharCode(e.which));
        }
    });
</script>

Seems to work just fine with jQuery 1.4.2, FF, IE, Chrome.

在jQuery 1.4.2、FF、IE、Chrome上运行良好。

To delve into the mess that is JS keyboard event handling, see: JavaScript Madness: Keyboard Events

要深入了解JS键盘事件处理的混乱，请参见:JavaScript疯狂:键盘事件

---

Updated to filter ctrl, meta & alt key combinations as per Daniel's comment.

根据Daniel的评论更新以过滤ctrl、meta和alt组合键。

#3

Checking for key combinations will not be the best solution in all cases. For example, if you use a key combinations to type a character, that will block the onkeypress event, when it shouldn't.

检查密钥组合不是所有情况下最好的解决方案。例如，如果您使用一个键组合来输入一个字符，它会在不应该的情况下阻塞onkeypress事件。

Try that here and you will see that it will not work: http://jsfiddle.net/4jx7v/

在这里尝试一下，您将看到它将不起作用:http://jsfiddle.net/4jx7v/。

(On a Mac, try alt + a letter and on Windows, try alt + a series of numeric keys.)

(在Mac电脑上，试试alt +字母，在Windows上，试试alt +一系列数字键。)

An alternative to that would be to simply check if the input value has changed from the previous one, that way, you know for sure that something was typed.

另一种方法是简单地检查输入值是否与前一个值发生了变化，这样就可以确定输入值是否已经被输入。

JavaScript:

JavaScript:

var previousValue;
$("input").keypress(function (e) {
    if (previousValue != $(this).val()) {
        alert('Something has been typed.');
    }
});

#4

You can use regular expressions like this

你可以使用这样的正则表达式。

$('something').keypress(function(e) {
    if(e.match(YourRegularExpressionHere)) {
        //do something
    } 
});

This will only do something if it matches the regular expression.

只有当它与正则表达式匹配时，它才会做一些事情。

Have a look at regular expressions. http://www.regular-expressions.info/javascript.html

看看正则表达式。http://www.regular-expressions.info/javascript.html