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


101

私が得た:

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

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

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


テキストが削除された場合、ボタンは再び無効になりますか?もしそうなら、あなたはおそらくキーを押し続ける必要があります。
ブリリアント、

回答:


152

変更keypressするにはkeyup

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

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


@ブリリアンあなたは正しいです。これを回避するために、以下に投稿しました。
David Oliveros 2014年

7
どのようにiPhone / Androidデバイスでこれを達成しますか?キーアップ機能はサポートしていません。
Merijn Den Houting 2014

4
キープレスの定義は正確ではありません。それがキーダウンの定義です。参照quirksmode.org/dom/events/keys.html
challet

59

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

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

オススメです。

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


8
うわー、これはいくつかの未回答/悪い回答のSOの質問への答えです。
Ben Racicot、2015年

4
これは、入力フィールドで矢印キーやシフトなどを押すことを無視する必要がある場合にも最適です。
hovado 2015年

2
caniuse.com/#search=input比較的優れたブラウザサポート。すべてのキーアップを聞くよりもはるかに良い答え。
James Haug、

1
それは私の日を救います!ありがとうございました。次のコードを使用しました:$( '。subject_mark')。on( "input"、function(){var $ th = $(this); $ th.val($ th.val()。replace(/ [^ 0-9] / g、function(str){return '';}));
arsho


5

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

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

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

これは、Backspaceを押した場合でも奇妙な動作をします...おそらくタイムアウト0でキーを押しますか?
ブリリアント

ああ、気にしないでください。OPは、テキストフィールドがクリアされた場合の動作を指定しません。
ブリリアント

4

onchangeキーイベントを使用する代わりに、イベントハンドラーをフックすることができます。

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

使用するEdit > Pasteか、右クリックして、変更イベントを発生させます貼り付けた後ではなく、キーイベント。なお、一部のブラウザでは、(私は知らないけれども)ペーストの上にキーイベントをシミュレートすることができるが、あなたがすることはできませんを頼りにその振る舞い。


4

このようなものを試してください:

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

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

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


それは賢い問題の問題ではありません。keyupイベントは同じ結果を提供しません。keyupを使用して、shift、ctrlなどの個別のイベントを取得します-シフトまたはctrlキーの状態を確認する必要がある一連のキーイベントではなく、実際に入力されている文字(アンパサンドなど)を取得する場合は、キーを押します。行く方法です。
Ripside 2015年

1
正しい; それが「セマンティクスが違う」という意味です。
2016年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.