javascript - 如何检测按下的键是否会在 <input> 文本框中产生一个字符？

Question

我有一个普通的文本框:

<input type="text"> 

我使用 jQuery 来处理与键相关的事件:

$("input:text").keydown(function() {
    // keydown code
}).keypress(function() {
    // keypress code
}).keyup(function() {
    // keyup code
});

用户将注意力集中在一个文本框上并按下键盘上的各种键(常用键:字母、数字、SHIFT、BACKSPACE、SPACE 等)。我需要检测用户何时按下将增加文本框值长度的键。例如，“A”键会增加它，“SHIFT”键不会。

我记得看过 PPK 的一次讲座，他提到了这两者之间的区别。它与事件有关 - keydown 与 keypress - 并且可能与事件属性 - key、c​​har、keyCode 有关。

更新!

我需要在 keydown 或 keypress 处理程序中知道这些信息。我等不及 keyup 事件的发生。

为什么我需要这个:

我有一个文本框，它的大小会根据用户输入动态变化。你可以看看这个演示:http://vidasp.net/tinydemos/variable-size-text-box.html

在演示中，我有一个 keydown 和 keyup 处理程序。 keyup 处理程序根据输入值调整文本框大小。但是，keydown 处理程序将大小设置为比输入值大 1 个字符。我这样做的原因是，如果我不这样做，那么字符就会溢出到文本框之外，只有当用户松开按键时，文本框才会展开。这看起来很奇怪。这就是为什么我必须预测新字符 - 我在每个按键上放大文本框，因此，在字符出现在文本框中之前。正如您在演示中看到的那样，这个方法看起来很棒。

但是，问题在于 BACKSPACE 和 ARROW 键 - 它们还会在按下键时扩展文本框，并且只有在按下键时文本框的大小才会得到纠正。

解决方法:

解决方法是手动检测 BACKSPACE、SHIFT 和 ARROW 键并据此采取行动:

// keydown handler
function(e) {
    var len = $(this).val().length;
    if (e.keyCode === 37 || e.keyCode === 39 ||
        e.keyCode === 16) { // ARROW LEFT or ARROW RIGHT or SHIFT key
        return;
    } else if (e.keyCode === 8) { // BACKSPACE key
        $(this).attr("size", len <= 1 ? 1 : len - 1);
    } else {
        $(this).attr("size", len === 0 ? 1 : len + 1);
    }
}

这对 BACKSPACE、SHIFT、ARROW LEFT 和 ARROW RIGHT 有效(并且看起来很棒)。但是，我想要一个更强大的解决方案。

Answer 1

我认为这将完成这项工作，或者如果不是非常接近并且只需要进行微小的调整。你必须记住的是，你无法可靠地告诉任何可能在 keydown 或 keyup 事件中键入的字符:所有这些都必须是在 keypress 处理程序中完成。关键事件的权威资源是 http://unixpapa.com/js/key.html

您还需要考虑此代码无法处理的粘贴。您将需要单独的 paste 事件处理程序(尽管 Firefox < 3.0、Opera 和非常旧的 WebKit 浏览器不支持此事件)。您需要在粘贴处理程序中使用计时器，因为在 JavaScript 中无法访问即将粘贴的内容。

function isCharacterKeyPress(evt) {
    if (typeof evt.which == "undefined") {
        // This is IE, which only fires keypress events for printable keys
        return true;
    } else if (typeof evt.which == "number" && evt.which > 0) {
        // In other browsers except old versions of WebKit, evt.which is
        // only greater than zero if the keypress is a printable key.
        // We need to filter out backspace and ctrl/alt/meta key combinations
        return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8;
    }
    return false;
}

<input type="text" onkeypress="alert(isCharacterKeyPress(event))">