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

Question

我试图在文本框中输入文本,因为用户输入了文本(jsfiddle playground):

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>

代码运行没有错误,但该值的中input text框,期间onKeyPress总是值之前的变化:

问题:如何获取文本框的文本onKeyPress？

奖金Chatter

在HTML DOM中有三个与"用户正在输入"相关的事件:

• onKeyDown
• onKeyPress
• onKeyUp

在Windows中,WM_Key当用户按住某个键时,消息的顺序变得很重要,并且该键开始重复:

• WM_KEYDOWN('a')- 用户按下了A键
• WM_CHAR('a')- a已收到用户的字符
• WM_CHAR('a')- a已收到用户的字符
• WM_CHAR('a')- a已收到用户的字符
• WM_CHAR('a')- a已收到用户的字符
• WM_CHAR('a')- a已收到用户的字符
• WM_KEYUP('a')- 用户已释放A密钥

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

重要的一点是,你回应WM_CHAR信息,重复的信息.否则,按下某个键时会错过事件.

在HTML中,情况略有不同:

• onKeyDown
• onKeyPress
• onKeyDown
• onKeyPress
• onKeyDown
• onKeyPress
• onKeyDown
• onKeyPress
• onKeyDown
• onKeyPress
• onKeyUp

HTML提供了一个KeyDown和KeyPress每个按键重复.KeyUp只有在用户释放密钥时才会引发该事件.

拿走

• 我可以回复onKeyDown或者onKeyPress,但是input.value在更新之前它们仍然被提出
• 我无法回应onKeyUp,因为它不会发生,因为文本框中的文本会发生变化.

问题:如何获取文本框的文本onKeyPress？

奖金阅读

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

Answer 1

把事情简单化.使用onKeyPress()和onKeyUp():

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

这样可以获取最新的字符串值(在按键之后),并在用户按下某个键时进行更新.

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

Answer 2

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)不会触发退格键的按键事件; 将keypress更改为代码中的keyup.

Answer 3

处理该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>

我会重写一下：

function showCurrentValue(event)
{
    const value = event.target.value;
    document.getElementById("lblValue").innerText = value;
}

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

Answer 4

保持紧凑。
每次您按下一个键，edValueKeyPress()都会调用该功能。
您还已经在该函数中声明和初始化了一些变量-减慢了该过程的速度，并且还需要更多的CPU和内存。
您可以简单地使用此代码-从简单替换派生。

function edValueKeyPress()
{
    document.getElementById("lblValue").innerText =""+document.getElementById("edValue").value;
}

这就是您想要的，而且速度更快！