web-dev-qa-db-ja.com

入力要素のJavascript変更イベントは、フォーカスを失うだけで発生します

入力要素があり、コンテンツの長さをチェックし続け、長さが特定のサイズに等しくなるたびに、送信ボタンを有効にしたいのですが、イベントとしてJavascriptのonchangeイベントで問題に直面しています入力要素がスコープから外れた場合にのみ発生し、コンテンツが変更された場合には発生しません。

<input type="text" id="name" onchange="checkLength(this.value)" />

---- onchangeは、名前の内容を変更しても起動しませんが、名前がフォーカスを失ったときにのみ起動します。

このイベントをコンテンツ変更で機能させるためにできることはありますか？またはこれに使用できる他のイベントはありますか？ onkeyup関数を使用して回避策を見つけましたが、ブラウザーの自動補完機能からコンテンツを選択しても起動しません。

キーボードでもマウスでも、フィールドの内容が変わったときに機能するものが欲しいのですが...

javascriptjquerydom-events
71
Sachin Midha
(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レベル3イベントタイプ。 http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

ユーザーエージェントは、1つ以上の文字が入力されたときにこのイベントをディスパッチする必要があります。これらの文字は、さまざまなソースに由来する場合があります。たとえば、キーボードデバイスでキーが押されたり離されたりした結果の文字、入力メソッドエディタの処理、または音声コマンドの結果です。 「貼り付け」操作によって単純な文字シーケンス、つまり構造やスタイル情報のないテキストパッセージが生成される場合、このイベントタイプも生成する必要があります。

input — HTML5 イベントタイプ。

ユーザーが値を変更するとコントロールで発生します

Firefox、Chrome、 IE9 およびその他の最新のブラウザーがサポートしています。

このイベントは、要素がフォーカスを失ったときに発生するonchangeイベントとは異なり、変更直後に発生します。

104
katspaugh

Karnaughの答えの拡張として、cssクラスを使用して複数の要素に対してそれを行う方法を以下に示します。

   $('.myclass').each(function(){
        $(this).attr('oldval',$(this).val());
   });

   $('.myclass').on('change keypress paste focus textInput input',function(){
       var val = $(this).val();
       if(val != $(this).attr('oldval') ){
           $(this).attr('oldval',val); 
           checkLength($(this).val());
        }
    });
9
SSZero

jQueryの方法で実行：

<input type="text" id="name" name="name"/>


$('#name').keyup(function() {
  alert('Content length has changed to: '+$(this).val().length);
});
2
powtac

同じ問題に対して開発した別のソリューションを次に示します。ただし、多くの入力ボックスを使用するため、要素自体のユーザー定義属性として古い値「data-value」を保持します。 jQueryを使用すると、管理が非常に簡単になります。

        $(document).delegate('.filterBox', 'keyup', { self: this }, function (e) {
            var self = e.data.self;

            if (e.keyCode == 13) {
                e.preventDefault();
                $(this).attr('data-value', $(this).val());
                self.filterBy(this, true)
            }
            else if (e.keyCode == 27) {
                $(this).val('');
                $(this).attr('data-value', '');
                self.filterBy(this, true)
            }
            else {
                if ($(this).attr('data-value') != $(this).val()) {
                    $(this).attr('data-value', $(this).val());
                    self.filterBy(this);
                }
            }
        });

ここでは、クラス「filterBox」を持つ5〜6個の入力ボックスを使用し、data-valueが独自の値と異なる場合にのみfilterByメソッドを実行しています。

0
efirat

Onkeyupを使用できます

<input id="name" onkeyup="checkLength(this.value)" />
0
Dogbert

それを見つけるのに30分かかりましたが、これは2019年6月に機能しています。

<input type="text" id="myInput" oninput="myFunction()">

また、jsでプログラムによってイベントリスナーを追加する場合

inputElement.addEventListener("input", event => {})
0
franmcod

すべての可能性をキャッチしたい場合は、onkeyupとonclick（またはonmouseup）の組み合わせを使用する必要があります。

<input id="name" onkeyup="checkLength(this.value)" onmouseup="checkLength(this.value)" />
0
DaveRandom