web-dev-qa-db-ja.com

JQueryの入力変更を検出しますか？

inputでjquery .changeを使うとき、イベントは入力がフォーカスを失ったときにのみ発生します。

私の場合は、入力値が変更されたらすぐにサービスを呼び出す必要があります（値が有効かどうかを確認します）。どうすればこれを達成できますか？

javascriptjqueryhtml
341
Banshee

説明と例を示すために更新されました

例： http://jsfiddle.net/pxfunc/5kpeJ/

方法1。inputname__イベント

最近のブラウザでは inputNAME_ イベントを使います。このイベントは、ユーザーがテキストフィールドに入力、貼り付け、元に戻す、基本的に値がある値から別の値に変更されたときに発生します。

JQueryではこれを次のようにします。

$('#someInput').bind('input', function() { 
    $(this).val() // get the current value of the input field.
});

jQuery 1.7以降、bindname__をonname__に置き換えます。

$('#someInput').on('input', function() { 
    $(this).val() // get the current value of the input field.
});

方法2 keyupname__イベント

古いブラウザではkeyupname__イベントを使用します（キーボードのキーが離されると発生します。 "w"が解放されると入力値が変更されkeyupname__イベントが発生するため、このイベントはある種の誤検知を引き起こす可能性があります。 "shift"キーが離されるとkeyupname__イベントが発生しますが、入力は変更されていません。ユーザーが右クリックしてコンテキストメニューから貼り付けても、このメソッドは起動しません。

$('#someInput').keyup(function() {
    $(this).val() // get the current value of the input field.
});

方法3。タイマー（setIntervalname__またはsetTimeoutname__）

keyupname__の制限を回避するために、入力の値を定期的にチェックして値の変化を判断するようにタイマーを設定できます。このタイマーチェックを行うには、setIntervalname__またはsetTimeoutname__を使用できます。このSO質問のマーク付き回答を参照してください。 jQueryテキストボックス変更イベント 、または特定の入力フィールドのタイマーを開始および停止するためのfocusname__およびblurname__イベントを使用した実用例

507
MikeM

あなたがHTML5を持っているならば：

  • oninput（実際に変更が発生した場合にのみ発生しますが、即時に発生します）

それ以外の場合は、入力要素の値が変更されたことを示す可能性があるこれらすべてのイベントを確認する必要があります。

  • onchange
  • onkeyup（ not keydownまたは入力の値としてのkeypressにはまだ新しいキーストロークがありません）
  • onpaste（サポートされている場合）

そして多分：

  • onmouseup（これについてはよくわかりません）
183
Alnitak

HTML5ではjQueryを使わずに inputイベント を使うことができます。

var input = document.querySelector('input');

input.addEventListener('input', function()
{
    console.log('input changed to: ', input.value);
});

これは入力のテキストが変わるたびに起動します。

IE 9以降および他のブラウザでサポートされています。

ここで jsFiddleに住んでみてください 。

81
Drew Noakes

他の人がすでに示唆しているように、あなたの場合の解決策は 複数のイベントをスニフする です。
この仕事をしているプラ​​グインはしばしば以下のイベントをリッスンします。

$ input.on（ 'キー押下キーアップキーアップマウスダウンクリックマウスアップの変更'、ハンドラ）;

うまくいくと思われる場合は、focus、blur、その他のイベントも追加できます。
ユーザーの行動に従って実行するための更なる手順をブラウザのメモリにロードするので、私はイベントをリスニングするために超えないことを提案します。

注意： JavaScriptでinput要素の値を変更しても（例えばjQueryの.val()メソッドを介して）上記のイベントは発生しません
（参照： https://api.jquery.com/change/ ）.

11
Emanuele Del Grande

要素内で何かが変更されたときにイベントが発生するようにしたい場合は、 keyup イベントを使用できます。

2
Jivings

//要素がフォーカスを失うと、.blurがトリガーされます

$('#target').blur(function() {
  alert($(this).val());
});

//手動でトリガーするには

$('#target').blur();
1
Kszili

keyup や keypress のようなjQueryイベントがあります。これらは入力HTML要素で使用できます。さらに blur（） イベントを使用することもできます。

1
softwaredeveloper

これは、jQuery 1.7以上を使用した入力に対するすべての変更をカバーしています。

$(".inputElement").on("input", null, null, callbackFunction);
0
rybo111