261

ユーザーのキーボード操作がテキストフィールドの値を変更するタイミングを検出したい。最新のブラウザ間で一貫して機能するはずです。

.keypressイベントのJQueryページには、一貫性がないと書かれていますか？また、バックスペース、削除などでは機能しません。

.keydownは、Shiftキー、Altキー、矢印キーなどに反応するため、そのままでは使用できません。また、ユーザーがキーを押したまま複数の文字を挿入しても、複数回起動することはありません。

私が見逃している簡潔な方法はありますか？または、.keydownを使用して、矢印キーやShiftなどによってトリガーされるイベントを除外する必要がありますか？私の主な関心事は、フィルタリングする必要があることに気付いていないキーがあることです。（altとctrlをほとんど忘れていましたが、他にもある可能性があります）しかし、キーが押されて複数の文字が挿入されていることをどのように検出しますか？

ボーナスとして、貼り付け（右クリックを含む）による変更を検出しますが、ここから解決策があります。

4

5 に答える 5

805

'input'イベントをテキストボックスにバインドできます。これは入力が変更されるたびに発生するため、（右クリックでも）何かを貼り付けるときは、何かを削除して入力します。

$('#myTextbox').on('input', function() {
    // do something
});

ハンドラーを使用する場合change、これはユーザーが入力ボックスの選択を解除した後にのみ発生しますが、これは希望どおりでない場合があります。

ここに両方の​​例があります：http：//jsfiddle.net/6bSX6/

于 2012-10-09T10:21:07.083 に答える
25

jquery変更イベントを使用する

説明：イベントハンドラーを「変更」JavaScriptイベントにバインドするか、要素でそのイベントをトリガーします。

例

$("input[type='text']").change( function() {
  // your code
});

、、に.change勝る利点は、入力が変更されたときにのみイベントが発生することです。.keypress.focus.blur.change

于 2012-10-09T10:13:57.917 に答える
11

以下の機能を使用して最近達成したのと同じ機能。

編集時にSAVEボタンを有効にしたかった。

  1. 変更イベントは、編集後、[保存]ボタンをクリックする前にページ上の別の場所でマウスがクリックされた場合にのみ発生するため、お勧めできません。
  2. キーを押すと、Backspace、削除、貼り付けのオプションは処理されません。
  3. キーアップは、タブ、Shiftキーを含むすべてを処理します。

したがって、キープレス、キーアップ（バックスペース、削除用）、テキストフィールドの貼り付けイベントを組み合わせた関数を以下に記述しました。

お役に立てば幸いです。

function checkAnyFormFieldEdited() {
    /*
     * If any field is edited,then only it will enable Save button
     */
    $(':text').keypress(function(e) { // text written
        enableSaveBtn();
    });

    $(':text').keyup(function(e) {
        if (e.keyCode == 8 || e.keyCode == 46) { //backspace and delete key
            enableSaveBtn();
        } else { // rest ignore
            e.preventDefault();
        }
    });
    $(':text').bind('paste', function(e) { // text pasted
        enableSaveBtn();
    });

    $('select').change(function(e) { // select element changed
        enableSaveBtn();
    });

    $(':radio').change(function(e) { // radio changed
        enableSaveBtn();
    });

    $(':password').keypress(function(e) { // password written
        enableSaveBtn();
    });
    $(':password').bind('paste', function(e) { // password pasted
        enableSaveBtn();
    });


}
于 2012-10-09T10:27:57.433 に答える
9

選択したイベントを入力にバインドするために使用します。jQuery1.7以降ではイベントハンドラーをアタッチするための推奨される方法であるため、など$.on()のショートカットは使用しないでください（ http://api.jquery.com/on/およびhttp：を参照）。 //api.jquery.com/bind/）。$.keydown()$.on()

$.keydown()はへのショートカット$.bind('keydown')であり、（とりわけ）置き換え$.bind()られるものです。$.on()

あなたの質問に答えるために、私が知る限り、あなたがkeydown特にイベントを起こす必要がない限り、changeイベントはあなたのためにトリックをするべきです。

$('element').on('change', function(){
    console.log('change');
});

以下のコメントに対応するために、javascriptchangeイベントはここに文書化されています：https ：//developer.mozilla.org/en-US/docs/Web/Events/change

そしてchange、jQueryを使用して入力要素で機能するイベントの実際の例を次に示します。http：//jsfiddle.net/p1m4xh08/

于 2012-10-09T10:18:13.460 に答える
3

jQueryのchange（）関数を使用できます

$('input').change(function(){
  //your codes
});

APIページでそれを使用する方法の例があります：http：//api.jquery.com/change/

于 2012-10-09T10:14:32.200 に答える