如何在onKeyPress期间获取输入文本框的文本？

Question

当用户在文本框中键入文本时，我尝试在其中获取文本（JSFIDLE）：

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;

    //var s = $("#edValue").val();
    //$("#lblValue").text(s);    
}

<input id="edValue" type="text" onKeyPress="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

代码运行时没有错误，除了onKeyPress期间的输入文本框的值始终是更改前的值：

问题：如何在按键过程中获取文本框的文本？

HTML DOM中有三个与“用户正在键入”相关的事件：

• onKeyDown
• onKeyPress
• onKeyUp

在Windows中，当用户按住一个键并开始重复时，WM_Key消息的顺序变得很重要：

• WM_KEYDOWN（'a'）-用户按下了a键

将导致文本控件中出现五个字符：aaaaa

重要的一点是，您响应WM_CHAR消息，重复的消息。否则，当按下键时，您将错过事件。

在超文本标记语言中，情况略有不同：

• onKeyDown

Html提供了一个KeyDown和KeyPress每个按键重复。而KeyUp事件仅在用户释放钥匙时才会引发。

外卖

• 我可以响应onKeyDown或onKeyPress，但在输入之前，这两个按钮都会被触发。值已更新
• 我无法响应onKeyUp，因为它不会在文本框中的文本更改时发生

问题：如何在按键过程中获取文本框的文本？

• 使用jQuery获取表单值
• 获取输入文本框中的值

Answer 1

onKeyPress期间输入文本框的值始终为更改前的值

这是故意的：这允许事件侦听器取消按键。

如果事件侦听器取消事件，则不更新该值。如果事件未被取消，则在调用事件侦听器之后更新该值。

要在字段值更新后获取值，请计划在下一个事件循环中运行函数。通常的方法是调用setTimeout，超时时间为0：

$('#field').keyup(function() {
    var $field = $(this);

    // this is the value before the keypress
    var beforeVal = $field.val();

    setTimeout(function() {

        // this is the value after the keypress
        var afterVal = $field.val();
    }, 0);
});

试试这里：http://jsfiddle.net/Q57gY/2/

编辑：某些浏览器（如Chrome）不会触发退格按键事件；将按键更改为键入代码。

Answer 2

处理input事件是一个一致的解决方案：它在所有当代浏览器中都支持textarea和input元素，并在需要时准确触发：

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;
}

<input id="edValue" type="text" onInput="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

Answer 3

保持简单。同时使用onKeyPress（）和onKeyUp（）：

<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()">

这将负责获取最新的字符串值（在键向上后），并在用户按住键时进行更新。

jsfiddle：http://jsfiddle.net/VDd6C/8/