1. ホーム
  2. javascript

[解決済み] input要素のJavascriptのchangeイベントはフォーカスを失ったときのみ発生する

2023-04-10 20:51:37

質問

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イベントとは異なり、変更直後に発生します。