[解決済み] jQueryで入力変化を検出する?
質問
jqueryを使用する場合
.change
の上に
input
の場合、イベントは入力がフォーカスを失ったときのみ発生します。
私の場合、入力値が変更されたらすぐにサービスを呼び出す(値が有効かどうかをチェックする)必要があります。どうすればこれを実現できるでしょうか?
どのように解決するのですか?
説明と例のためにUPDATED
の例です。 http://jsfiddle.net/pxfunc/5kpeJ/
方法1.
input
イベント
モダンブラウザでは
input
イベントが発生します。 このイベントは、ユーザーがテキストフィールドに入力するとき、ペーストするとき、取り消すとき、基本的にはいつでもある値から別の値に変わったときに発生します。
jQueryではこのようにします。
$('#someInput').bind('input', function() {
$(this).val() // get the current value of the input field.
});
jQuery 1.7 以降では、以下のように置き換えます。
bind
を
on
:
$('#someInput').on('input', function() {
$(this).val() // get the current value of the input field.
});
方法2.
keyup
イベント
古いブラウザの場合は
keyup
イベント (これはキーボードのキーが離されると発生します。このイベントは、"w" が離されると入力値が変更されるため、ある種の誤検出をすることがあります。
keyup
イベントが発生しますが、"shift" キーが離されたときにも
keyup
イベントが発生しますが、入力には何の変更も加えられていません)。 また、このメソッドは、ユーザーが右クリックしてコンテキストメニューからペーストした場合にも発生しません。
$('#someInput').keyup(function() {
$(this).val() // get the current value of the input field.
});
方法3.タイマー(
setInterval
または
setTimeout
)
の制限を回避するために
keyup
の場合、タイマーを設定して定期的に入力の値をチェックし、値の変化を判断することができます。 そのためには
setInterval
または
setTimeout
を使えば、このタイマーチェックができます。 このSOの質問でマークされた答えを参照してください。
jQueryテキストボックスの変更イベント
を使用した動作例については、フィドルを参照してください。
focus
と
blur
イベントを使用して、特定の入力フィールドのタイマーを開始および停止することができます。
関連
-
[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は?
-
[解決済み] jQueryで入力を無効化/有効化する?
-
[解決済み] どのDOM要素にフォーカスがあるかを調べるには?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
-
[解決済み】未定義のオブジェクトプロパティを検出する
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
vue3レスポンシブ対応のためのsetup+ref+reactive
-
親子コンポーネント通信を解決する3つのVueスロット
-
fetch ネットワークリクエストラッパーの説明例
-
JSアレイループと効率解析の比較
-
jsを使った簡単な照明スイッチのコード
-
vueの補間表現とv-textディレクティブの違いについて
-
[解決済み】Node.js getaddrinfo ENOTFOUND
-
[解決済み】JavaScriptでインラインIF文の書き方は?
-
[解決済み】React-Redux: アクションはプレーンオブジェクトでなければならない。非同期アクションにはカスタムミドルウェアを使用する
-
Uncaught TypeError: null のプロパティ 'offsetHeight' を読み取れませんでした。