[解決済み] onKeyPress中に入力テキストボックスのテキストを取得するには？

質問

ユーザが入力したテキストボックスのテキストを取得しようとしています ( jsfiddleプレイグラウンド ):

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 ?

ボーナス・チャター

に関する3つのイベントがあります。 ユーザーが入力中です。 に関連する3つのイベントがあります。

• 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 キー

テキストコントロールに5つの文字が表示されることになります。 aaaaa

重要なのは、このように WM_CHAR メッセージに応答することです。そうしないと、キーが押されたときのイベントを見逃すことになります。

で HTML では少し異なります。

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

Htmlは KeyDown と KeyPress をキーリピートする。そして、その KeyUp イベントが発生するのは、ユーザがキーを離したときだけです。

持ち帰る

• I できる 応じる onKeyDown または onKeyPress の前に発生しますが、どちらも input.value が更新される前に
• に応答できません。 onKeyUp は、テキストボックスのテキストが変わっても起こらないからです。

質問です。 の間にテキストボックスのテキストを取得するにはどうすればよいでしょうか？ onKeyPress ?

ボーナス・リーディング

• jQueryでフォームの値を取得する
• 入力テキストボックスの値を取得する

どのように解決するのですか？

を処理する 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("label").innerText = value;
}

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