如何检测按下的键是否会在< input>内产生一个字符。文本框？ [英] How to detect if the pressed key will produce a character inside an <input> text-box?

问题描述

我有一个常规文本框：

<input type="text"> 

我使用jQuery处理与密钥相关的事件：

I use jQuery to handle key-related events:

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

用户专注于文本框并按下键盘上的各种键（通常的：字母，数字，SHIFT，BACKSPACE，SPACE，......）。我需要检测用户何时按下将增加文本框值长度的键。例如，A键会增加它，SHIFT键不会。

The user focuses on a text-box and presses various keys on his keyboard (the usual ones: letters, numbers, SHIFT, BACKSPACE, SPACE, ...). I need to detect when the user presses a key that is going to increase the length of the text-box value. For example, the "A" key will increase it, the "SHIFT" key wont.

我记得看过PPK的讲座，他提到了这两者之间的区别。它与事件有关 - keydown与keypress - 可能还有事件属性 - key，char，keyCode。

I remember watching a lecture by PPK where he mentioned the difference between those two. It has something to do with the event - keydown vs. keypress - and possibly with the event properties - key, char, keyCode.

更新！

Update!

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

I need to know this information within the keydown or keypress handlers. I cannot wait for the keyup event to occur.

为什么我需要这个：

Why I need this:

I有一个文本框，其大小根据用户输入动态变化。您可以查看此演示： http://vidasp.net/tinydemos/ variable-size-text-box.html

I have a text-box which size dynamically changes based on the user input. You can have a look at this demo: http://vidasp.net/tinydemos/variable-size-text-box.html

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

In the demo, I have a keydown and keyup handler. The keyup handler adjusts the text-box size based on the input value. However, the keydown handler sets the size to be 1 character larger then the input value. The reason I do this is that if I didn't, then the character would overflow outside the text-box and only when the user would let go of the key, the text-box would expand. This looks weird. That's why I have to anticipate the new character - I enlarge the text-box on each keydown, ergo, before the character appears in the text-box. As you can see in the demo, this method looks great.

然而，问题是BACKSPACE和ARROW键 - 它们还会扩展keydown上的文本框，并且只有在keyup上才能更正文本框大小。

However, the problem are the BACKSPACE and ARROW keys - they will also expand the text-box on keydown, and only on keyup the text-box size will be corrected.

解决方法：

A work-around:

A解决方法是手动检测BACKSPACE，SHIFT和ARROW键，并根据它进行操作：

A work-around would be to detect the BACKSPACE, SHIFT, and ARROW keys manually and act based on that:

// 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。但是，我希望有一个更强大的解决方案。

This works (and looks great) for BACKSPACE, SHIFT, ARROW LEFT and ARROW RIGHT. However, I would like to have a more robust solution.

推荐答案

我认为这样做，或者如果没有，那么关闭，只需要轻微的调整。您必须记住的是，您无法可靠地告诉任何可能在 keydown 或 keyup中键入的字符事件：所有这些都必须在 keypress 处理程序中完成。关键事件的权威资源是 http://unixpapa.com/js/key.html

This I think will do the job, or if not is very close and will need only minor tweaking. The thing you have to remember is that you can't reliably tell anything at all about any character that may be typed in a keydown or keyup event: that all has to be done in a keypress handler. The definitive resource for key events is http://unixpapa.com/js/key.html

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

You also need to consider pastes, which this code won't handle. You will need to have separate paste event handler (although this event isn't supported in Firefox < 3.0, Opera, and very old WebKit browsers). You'll need a timer in your paste handler since it's impossible in JavaScript to access the content that's about to be pasted.

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))">

这篇关于如何检测按下的键是否会在&lt; input&gt;内产生一个字符。文本框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！