Javascript——拦截键盘按下答案

【问题标题】：Javascript -- Intercepting keyboard pressesJavascript——拦截键盘按下
【发布时间】：2012-08-17 17:12:02
【问题描述】：

我有一个始终有焦点的输入框。进入这个输入框的命令总是字母。如果用户按下一个数字，我不希望它被添加到文本框中，而是使用它来运行不同的命令（就像热键一样）。

我看到实现的方法是查看 keyup 事件并删除不需要的字符。相反，有什么方法可以拦截键盘输入并检查插入之前的值是什么？

我考虑过使用 div 创建自定义输入字段并拦截所有键盘命令。有没有办法让一个闪烁的插入符号看起来像一个输入框？

【问题讨论】：

google "css cursor w3schools"
@thatidiotguy google "w3fools" ;)
@jbabey 我看不出给他一个关于如何使用 cursor CSS2 属性的好教程的危害。实际的 w3 规范看起来并不友好。
@thatidiotguy 大多数人更喜欢官方（并且正确）documentation，尽管我不确定 CSS 光标与这个问题的关系。

标签： javascript jquery javascript-events

【解决方案1】：

听起来你想要一个contenteditable div：

<div id="editor" contenteditable="true"></div>

您可以监听keydown 事件并阻止它们（如果它们不是字母）：

$("#editor").keydown(function (e) {
    if (e.which > 90 || (e.which > 48 && e.which < 65)) {
        e.preventDefault();
    }
});

要将数字处理为“热键”，您只需确定 e.which 是哪个键并采取相应措施。

示例： http://jsfiddle.net/g3mgR/1

【讨论】：

【解决方案2】：

这样的事情会起作用：

<input type="text" id="txt" />

对于 jQuery：

$('#txt').keydown(function (e) {
    var key = e.charCode || e.keyCode || 0;
    if (key > 46 && key < 58) {
        event.preventDefault();
        alert('its a number, do something');
    }
});

这里是Fiddle

【讨论】：

小提琴在 if 条件中有错字：|| 而不是 &&。

【解决方案3】：

使用keydown 代替keyup。

【讨论】：

【解决方案4】：

将keypress 事件与String.fromCharCode 结合使用：

document.getElementById('yourTextBoxID').onkeypress = function () {
    var characterPressed = String.fromCharCode(event.keyCode);

    if (characterPressed.test(/[a-z]/i)) {
        // user pressed a letter
    } else {
        // user did not press a letter
    }
};

http://jsfiddle.net/TSB9r/3/

【讨论】：