web-dev-qa-db-ja.com

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

私が得た:

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

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

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

96

keypresskeyupに変更します。

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

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

143

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

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

推奨。

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

55
billynoah

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

9

または、タイムアウトが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