[解決済み] 入力`要素の "変更 "イベントと "入力 "イベントの違いについて
2022-04-27 22:10:38
質問
との違いを教えてください。
change
と
input
のイベントは?
jQueryを使って追加しています。
$('input[type="text"]').on('change', function() {
alert($(this).val());
})
また
input
の代わりに
change
.
フォーカスに対するイベントの順序に何らかの違いがあるのでは?
解決方法は?
によると この記事 :
-
oninput
イベントは、ユーザーインターフェイスを通じて要素のテキスト内容が変更されたときに発生します。 -
onchange
は、選択状態、チェック状態、または要素のコンテンツがある場合に発生します。 変更された . 場合によっては、その要素がフォーカスを失ったときや、あるいは 戻る (Enter)で値が変更された場合。onchange属性は、以下のように使用することができます。<input>
,<select>
および<textarea>
.
TL;DR:
-
oninput
: テキスト内容に変更があった場合 -
onchange
:-
もし、それが
<input />
: 変更 + フォーカスを失う -
もし、それが
<select>
: 変更オプション
-
もし、それが
$("input, select").on("input", function () {
$("pre").prepend("\nOn input. | " + this.tagName + " | " + this.value);
}).on("change", function () {
$("pre").prepend("\nOn change | " + this.tagName + " | " + this.value);
}).on("focus", function () {
$("pre").prepend("\nOn focus | " + this.tagName + " | " + this.value);
}).on("blur", function () {
$("pre").prepend("\nOn blur | " + this.tagName + " | " + this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<select>
<option>Alice</option>
<option>Bob</option>
<option>Carol</option>
<option>Dave</option>
<option>Emma</option>
</select>
<pre></pre>
関連
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
[解決済み】 Uncaught TypeError : undefined のプロパティ 'replace' を読み取れない In Grid
-
[解決済み】event.stopPropagationとevent.preventDefaultの違いは何ですか?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] callとapplyの違いは何ですか?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] Bowerとnpmの違いは何ですか?
-
[解決済み] JavaScriptのnullとundefinedの違いは何ですか?
-
[解決済み] イベントを発生させた要素のIDを取得する
-
[解決済み] 入力にフォーカスがあるかどうかをテストするためにjQueryを使用する
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
Vueはランニングライト形式のテキストを水平方向にスクロールする機能を実装している
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
JavaScriptのクロージャの説明
-
[解決済み】最大呼び出しスタックサイズ超過エラー
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み] TypeError: $.ajax(...) is not a function?
-
[解決済み】TypeScript-のAngular Frameworkエラー - "exportAsがngFormに設定されたディレクティブはありません"
-
[解決済み】 Uncaught TypeError : undefined のプロパティ 'replace' を読み取れない In Grid
-
フロントエンド非同期(アシンク)ソリューション(全ソリューション)
-
モジュールのビルドに失敗しました。Error: ENOENT: no such file or directory, scandir 'D:\.... \node_modules