web-dev-qa-db-ja.com

JQuery：入力フィールドの変更を検出

可能な重複：
Jquery：テキストボックスの内容を検出する方法が変更された

ユーザーのキーボード操作によってテキストフィールドの値が変更されたことを検出したいです。最近のブラウザでも一貫して動作するはずです。

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

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

私が欠けている簡潔な方法はありますか？それとも、.keydownを使用して、矢印キー、Shiftキーなどでトリガーされたイベントを除外する必要がありますか？私の主な関心事は私がフィルターにかけられるべきであることを私が知らないキーがあるだろうということです。 （altとctrlについてはほとんど忘れていましたが、他にもあり得ると思います）しかし、キーが押されて複数の文字が挿入されていることをどのように検出すればよいでしょうか。

ボーナスとしてそれは貼り付け（右クリックを含む）による変更を検出するでしょうが、私は here からそれに対する解決策を持っています。

jquerykeypress
192
CL22

'input'イベントをテキストボックスにバインドすることができます。 毎回 が変わるので、何かを貼り付けたら（右クリックしても）、削除して何かを入力します。

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

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

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

621
Timm

Jqueryを使う イベントを変更する

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

例

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

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

12
Sibu

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

編集時に[保存]ボタンを有効にしたいです。

  1. 変更イベントは、編集後、SAVEボタンをクリックする前にマウスをページ上の別の場所でクリックした場合にのみ発生するので推奨されません。
  2. キーを押してもBackspace、Delete、Pasteの各オプションは処理されません。
  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();
    });


}
9
R Shah

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

$.keydown()は$.bind('keydown')への単なる近道であり、$.bind()は$.on()に取って代わるものです（とりわけ）。

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

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

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

そして、これは、jQueryを使って、input要素を処理するchangeイベントの実用的な例です： http://jsfiddle.net/p1m4xh08/

8
totallyNotLizards

JQueryのchange（）関数が使えます

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

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

3
RRikesh