入力要素のJavascript変更イベントは、フォーカスを失ったときにのみ発生します

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

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

---- onchangeは、名前の内容を変更しても発生しませんが、名前のフォーカスが外れた場合にのみ発生します。

このイベントをコンテンツの変更で機能させるためにできることはありますか？または私がこれに使用できる他のイベント？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— W3CDOMレベル3イベントタイプ。http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

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

input- HTML5のイベントタイプ。

ユーザーが値を変更したときにコントロールで起動されます

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

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

katspaughの答えの拡張として、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());
        }
    });

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

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

jsでプログラムでイベントリスナーを追加したい場合

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

それをjQueryの方法で行います。

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


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

onkeyupを使用できます

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

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

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

これが私が同じ問題のために開発した別の解決策です。ただし、多くの入力ボックスを使用するため、要素自体のユーザー定義属性として古い値「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メソッドを実行します。