web-dev-qa-db-ja.com

keypressイベントの後にjquery .val（）を取得するにはどうすればよいですか？

私が得た：

$(someTextInputField).keypress(function() {
  alert($(this).val());
});

現在、アラートは常にキーを押す前に値を返します（たとえば、フィールドが空の場合、「a」と入力するとアラートが表示されます」。「b」と入力すると「a」が表示されます...）。しかし、キーを押した後の値が必要です-どうすればいいですか？

背景：テキストフィールドに少なくとも1つの文字が含まれたらすぐにボタンを有効にします。したがって、このテストをすべてのキー押下イベントで実行しますが、返されたval（）を使用すると、結果は常に1ステップ遅れます。 change（）イベントを使用することは、テキストボックスを離れるまでボタンが無効になるため、オプションではありません。それを行うより良い方法があれば、私はそれを聞いてうれしいです！

javascriptjqueryeventsformsjavascript-events
96
Jörg Brenninkmeyer

keypressをkeyupに変更します。

$(someTextInputField).on("keyup", function() {
  alert($(this).val());
});

keypressはキーが押されたときに発生し、keyupはキーが離されたときに発生します。

143
Hooray Im Helping

Jsの "input"イベントについて誰も言及していないことに驚いた：

$(someTextInputField).on('input', function() {
  alert($(this).val());
});

推奨。

https://developer.mozilla.org/en-US/docs/Web/Events/input

55
billynoah

キーを押す代わりに、keyupを使用します。

9
Kris van der Mast

または、タイムアウトが0のkeydownイベントを使用できます。

これにより、ユーザーがキーを押したままにしたときに適用されるのではなく、変更が即座に適用されます。

$(someTextInputField).on("keydown", function() {
  setTimeout(function($elem){
    alert($elem.val());
  }, 0, $(this));
});
5
David Oliveros

次のようなものを試してください：

$('#someField').keypress(function() {
  setTimeout(function() {
    if ($('#someField').val().length > 0)
      $('#theButton').attr('disabled', false);
  }, 1);
});

これは単にタイムアウトを導入するため、「キー押下」イベントループが完了した後、コードはその後すぐに実行されます。このような短いタイマー間隔は（ブラウザによって切り上げられたとしても）目立ちません。

編集 —またはあなたcould他の人が言うように「キーアップ」を使用しますが、そのセマンティクスは異なります。

4
Pointy

キーイベントを使用する代わりに、onchangeイベントハンドラーを接続することもできます。

$(someTextInputField).change(function() {
    alert($(this).val());
});

Edit > Pasteまたは右クリックして[貼り付け]を使用すると、変更イベントが発生しますが、キーイベントは発生しません。注一部ブラウザーは貼り付けのキーイベントをシミュレートできます（私は知りませんが）。ただし、count onはできません。

4
Stephen P