如何在onKeyPress期间获取输入文本框的文本? [英] How to get text of an input text box during onKeyPress?

问题描述

我试图在用户输入文本时获取文本框中的文本 (

获取输入文本框中的值

解决方案

处理 input 事件是一个一致的解决方案:它是 支持 用于所有现代浏览器中的 textarea 和 input 元素，它会在您需要时准确地触发它:

function edValueKeyPress() {var edValue = document.getElementById("edValue");var s = edValue.value;var lblValue = document.getElementById("lblValue");lblValue.innerText = "文本框包含:" + s;}

<span id="lblValue">文本框包含:</span>

不过，我会稍微重写一下:

function showCurrentValue(event){常量值 = event.target.value;document.getElementById("label").innerText = value;}

<input type="text" onInput="showCurrentValue(event)"><br>文本框包含:<span id="label"></span>

I am trying to get the text in a text box as the user types in it (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>

​ The code runs without errors, except that the value of the input text box, during onKeyPress is always the value before the change:

Question: How do I get the text of a text box during onKeyPress?

Bonus Chatter

There are three events related to "the user is typing" in the HTML DOM:

• onKeyDown
• onKeyPress
• onKeyUp

In Windows, the order of WM_Key messages becomes important when the user holds down a key, and the key begins to repeat:

• WM_KEYDOWN('a') - user has pushed down the A key
• WM_CHAR('a') - an a character has been received from the user
• WM_CHAR('a') - an a character has been received from the user
• WM_CHAR('a') - an a character has been received from the user
• WM_CHAR('a') - an a character has been received from the user
• WM_CHAR('a') - an a character has been received from the user
• WM_KEYUP('a') - the user has released the A key

Will result in five characters appearing in a text control: aaaaa

The important point being that the you respond to the WM_CHAR message, the one that repeats. Otherwise you miss events when a key is pressed.

In HTML things are slightly different:

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

Html delivers an KeyDown and KeyPress every key repeat. And the KeyUp event is only raised when the user releases the key.

Take aways

• I can respond to onKeyDown or onKeyPress, but both are still raised before the input.value has been updated
• I cannot respond to onKeyUp, because it doesn't happen as the text in the text-box changes.

Question: How do I get the text of a text-box during onKeyPress?

Bonus Reading

• Getting a form value with jQuery
• Get the value in an input text box

解决方案

Handling the input event is a consistent solution: it is supported for textarea and input elements in all contemporary browsers and it fires exactly when you need it:

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>

I'd rewrite this a bit, though:

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

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

这篇关于如何在onKeyPress期间获取输入文本框的文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！