[解決済み] input要素のJavascriptのchangeイベントはフォーカスを失ったときのみ発生する
質問
input要素があり、内容の長さをチェックし続け、長さが特定のサイズに等しくなるたびに送信ボタンを有効にしたいのですが、Javascriptのonchangeイベントが、input要素がスコープ外に出たときのみ発生し、内容が変更されたときには発生しないという問題に直面しています。
<input type="text" id="name" onchange="checkLength(this.value)" />
----onchange は name の内容が変化したときには発動せず、name のフォーカスが外れたときにのみ発動します。
このイベントをコンテンツの変更時に動作させるために何かできることはありますか? または、このために使用できる他のイベントはありますか? onkeyup 関数を使用して回避策を見つけましたが、これは、ブラウザのオートコンプレッサーからコンテンツを選択したときに発火しません。
私は、キーボードまたはマウスによってフィールドのコンテンツが変更されたときに動作できるものが欲しいのですが、何かアイデアはありますか?
どのように解決するのですか?
(function () {
var oldVal;
$('#name').on('change textInput input', function () {
var val = this.value;
if (val !== oldVal) {
oldVal = val;
checkLength(val);
}
});
}());
これは
change
を、キーストロークを
paste
,
textInput
,
input
(利用可能な場合)。そして、必要以上に発射しないこと。
http://jsfiddle.net/katspaugh/xqeDj/
リファレンスです。
textInput
- W3C DOM Level 3 のイベントタイプです。
http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents
ユーザエージェントは、1つ以上の文字が入力されたとき、このイベントをディスパッチしなければなりません。 入力されたとき、このイベントをディスパッチしなければなりません。これらの文字は、様々なソースから発生する可能性があります。 例えば、キーボードデバイスでキーが押されたり、離されたりして入力された文字。 キーボードデバイスで押されたり離されたりした文字、入力メソッ また、音声コマンドによる入力も可能である。貼り付け "操作の場合 貼り付け」操作により、単純な文字列、すなわち、構造やスタイル情報を持たないテキストパッセージ を生成する場合、このイベントタイプも生成されなければならない。 も生成されるはずです。
input
- an
HTML5
イベントの種類を指定します。
ユーザーが値を変更したときにコントロールで発生する
Firefox、Chromeの場合。 IE9 といったモダンブラウザがサポートしています。
<ブロッククオートこのイベントは、要素のフォーカスが外れたときに発生するonchangeイベントとは異なり、変更直後に発生します。
関連
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] どのDOM要素にフォーカスがあるかを調べるには?
-
[解決済み] イベントを発生させた要素のIDを取得する
-
[解決済み] 入力にフォーカスがあるかどうかをテストするためにjQueryを使用する
-
[解決済み】HTMLのテキスト入力で数値入力しかできない。
-
[解決済み] [Solved] 'blur'イベントが発生したとき、フォーカスがどの要素に*行ったかを調べるにはどうすればよいですか?
-
[解決済み】absoluteの親divの子要素をホバーしたときのonmouseoutをjQueryなしで防止する。
-
[解決済み] ブラウザがファイルのダウンロードを受信したことを検出する
-
[解決済み] Chart.jsを使ってドーナツチャートの中にテキストを追加するには?
-
[解決済み] JavaScriptを使用してHTML要素に属性を追加/更新するには?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JSのDateからDay名
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] bootstrap のポップオーバーがすべての要素の上に表示されない
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] Javascript / jQueryでAndroid端末を検出する。
-
[解決済み] サブドメインにまたがってlocalStorageを使用する
-
[解決済み] AJAX Mailchimp サインアップフォームの統合
-
[解決済み] Promise : then vs then + catch [重複].
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
-
[解決済み] V8 Javascript エンジンのスタンドアロン実行