web-dev-qa-db-ja.com

テキストフィールドのキーダウンイベント後に入力テキストフィールドの「値」を検出しますか？

そのため、私のサイトには入力ボックスがあり、入力ボックスの値を警告するだけのonkeydownイベントがあります。

残念ながら、入力の値には、キーが押されたことによる変更は含まれていません。

たとえば、この入力ボックスの場合：

<input onkeydown="alert(this.value)" type="text" value="cow" />

デフォルト値は「牛」です。入力でキー「s」を押すと、alert（ "cows"）ではなくalert（ "cow"）が表示されます。どうすればalert（ "cows"）onkeyupを使用せずににすることができますか？ onkeyupは反応が鈍いので、使いたくありません。

部分的な解決策の1つは、押されたキーを検出して入力の値に追加することですが、入力のテキストを強調表示してからキーを押した場合など、すべての場合に機能するとは限りません。

誰かがこの問題の完全な解決策を持っていますか？

ありがとう

formsjavascript-eventskeydown
22
rawrrrrrrrr

mousedownおよびinputイベントは、フィールドに到達する前にイベントをブロックする機会を与えるため、イベントハンドラーは変更が適用される前にのみコンテンツを表示します。

この制限を回避するには、値を取得する前にブラウザにフィールドの内容を更新する機会を与えます。最も簡単な方法は、値を確認する前に小さなタイムアウトを使用することです。

最小限の例は次のとおりです。

<input id="e"
    onkeydown="window.setTimeout( function(){ alert(e.value) }, 1)"
    type="text" value="cow" />

これにより、キープレスハンドラーとキーダウンハンドラーがコントロールの値を変更した後に発生する1ミリ秒のタイムアウトが設定されます。モニターが60fpsで更新されている場合は、2フレーム遅れる前に16msのウィグルルームがあります。

より完全な例（ Windowオブジェクトへの名前付きアクセス に依存しない）は次のようになります。

var e = document.getElementById('e');
var out = document.getElementById('out');

e.addEventListener('input', function(event) {
  window.setTimeout(function() {
    out.value = event.target.value;
  }, 1);
});
<input type="text" id="e" value="cow">
<input type="text" id="out" readonly>

上記のスニペットを実行するときは、次のいくつかを試してください。

  • カーソルを先頭に置き、次のように入力します
  • テキストボックスの中央にコンテンツを貼り付けます
  • たくさんのテキストを選択し、入力して置き換えます
18
kibibu

新しいブラウザでは、新しいHTML5「入力」イベント（ https://developer.mozilla.org/en-US/docs/DOM/window.oninput ）を使用できることに注意してください。この。ほとんどの非IEブラウザーは、このイベントを長い間サポートしてきました（リンクの互換性表を参照してください）。 for IEバージョン>/9は残念ながらのみです。

5
Elte Hupkes

oninputイベントを使用してみてください。 onkeydownとは異なり、onkeypressイベントは、このイベントがコントロールのvalueプロパティを更新します。

<input id="txt1" value="cow" oninput="alert(this.value);" />
5
Artem

ここに説明付きの例があります： http://jsbin.com/awopus/4/edit

0
Saram

キーアップ/ダウンイベントは、ブラウザによって処理が異なります。簡単な解決策は、mootoolsのようなライブラリを使用することです。これにより、それらは同じように動作し、伝播とバブリングを処理し、コールバックで標準の「this」を提供します。

0
Jeff Ober

Jqueryはこれを行うための最適な方法です。以下を参照してください。

let fieldText = $('#id');
let fieldVal = fieldText.val();

fieldText.on('keydown', function() {
   fieldVal.val();
});
0
Chadillac

私の知る限り、自分でロールしない限り、標準入力コントロールではそれを行うことはできません。

0
Vince Panuccio