445

テキストボックスの内容が変更されたときはいつでも検出したい。keyup メソッドを使用できますが、矢印キーのように文字を生成しないキーストロークも検出されます。keyup イベントを使用してこれを行うには、次の 2 つの方法を考えました。

  1. 押されたキーのASCIIコードが文字\バックスペース\削除であるかどうかを明示的に確認します
  2. クロージャを使用して、キー ストロークの前にテキスト ボックス内のテキストが何であったかを記憶し、これが変更されたかどうかを確認します。

どちらもちょっと面倒そうです。

4

15 に答える 15

747

「変更」ではなく「入力」イベントの監視を開始します。

jQuery('#some_text_box').on('input', function() {
    // do your stuff
});

...これは素晴らしくクリーンですが、さらに次のように拡張できます。

jQuery('#some_text_box').on('input propertychange paste', function() {
    // do your stuff
});
于 2012-03-31T12:09:20.473 に答える
68

HTML/標準 JavaScript で onchange イベントを使用します。

change()イベントであるjQueryでは。例えば：

$('element').change(function() { // do something } );

編集

いくつかのコメントを読んだ後、どうですか：

$(function() {
    var content = $('#myContent').val();

    $('#myContent').keyup(function() { 
        if ($('#myContent').val() != content) {
            content = $('#myContent').val();
            alert('Content has been changed');
        }
    });
});
于 2009-09-26T12:56:50.167 に答える
48

'change'イベントは正しく機能しませんが、'input'は完璧です。

$('#your_textbox').bind('input', function() {
    /* This will be fired every time, when textbox's value changes. */
} );
于 2012-06-03T09:33:53.463 に答える
44

これはどう：

< jQuery 1.7

$("#input").bind("propertychange change keyup paste input", function(){
    // do stuff;
});

>jQuery1.7

$("#input").on("propertychange change keyup paste input", function(){
    // do stuff;
});

これは IE8/IE9、FF、Chrome で動作します

于 2013-03-21T21:07:24.280 に答える
21

クロージャーを使用して、キー ストロークの前にチェックボックス内のテキストが何であったかを記憶し、これが変更されたかどうかを確認します。

うん。必ずしもクロージャーを使用する必要はありませんが、古い値を覚えて新しい値と比較する必要があります。

でも！キーを押さずにテキストボックスの内容を編集する方法があるため、これでもすべての変更をキャッチすることはできません。たとえば、テキストの範囲を選択してから右クリックして切り取ります。またはそれをドラッグします。または、別のアプリからテキスト ボックスにテキストをドロップします。または、ブラウザのスペルチェックで単語を変更します。または...

したがって、すべての変更を検出する必要がある場合は、ポーリングする必要があります。window.setInterval毎秒 (たとえば) 前の値に対してフィールドをチェックすることができます。キー押下による変更がより迅速に反映されるようonkeyupに、同じ関数に接続することもできます。

面倒？はい。しかし、それはそれか、通常の HTML onchange の方法で行うだけで、即時更新を試みないでください。

于 2009-09-26T13:32:41.953 に答える
14 
$(document).on('input','#mytxtBox',function () { 
 console.log($('#mytxtBox').val());
});

'input'イベントを使用して、テキストボックスのコンテンツの変更を検出できます。Jquery-1.7で非推奨になっているため、イベントをバインドするために「live」を使用しないでください。したがって、「on」を使用してください。

于 2013-02-27T12:18:00.087 に答える
5

テキストボックスが変更されたときにインタラクティブなことをしようとしていると思います（つまり、ajaxを介してデータを取得します）。私はこれと同じ機能を探していました。グローバルを使用することが最も堅牢でエレガントなソリューションではないことは知っていますが、それが私が行ったソリューションです。次に例を示します。

var searchValue = $('#Search').val();
$(function () {
    setTimeout(checkSearchChanged, 0.1);
});

function checkSearchChanged() {
    var currentValue = $('#Search').val();
    if ((currentValue) && currentValue != searchValue && currentValue != '') {
        searchValue = $('#Search').val();
        $('#submit').click();
    }
    else {
        setTimeout(checkSearchChanged, 0.1);
    }
}

ここで注意すべき重要な点の1つは、複数のリクエストを同時に送信したくないため、setIntervalではなくsetTimeoutを使用していることです。これにより、フォームが送信されるとタイマーが「停止」し、リクエストが完了するとタイマーが「開始」します。これを行うには、ajax呼び出しが完了したときにcheckSearchChangedを呼び出します。明らかに、これを拡張して最小の長さなどを確認できます。

私の場合、ASP.Net MVCを使用しているので、これをMVCAjaxと関連付ける方法も次の投稿で確認できます。

http://geekswithblogs.net/DougLampe/archive/2010/12/21/simple-interactive-search-with-jquery-and-asp.net-mvc.aspx

于 2010-12-21T16:45:06.913 に答える
4

jQuery UI オートコンプリート ウィジェットをご覧になることをお勧めします。彼らのコードベースは他のほとんどのものよりも成熟しているため、彼らはそこでほとんどのケースを処理しました.

以下はデモページへのリンクで、動作を確認できます。http://jqueryui.com/demos/autocomplete/#default

ソースを読んで、彼らがそれをどのように解決したかを見ることで、最大の利益が得られます。ここで見つけることができます: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js。

基本的に、それらはすべて実行し、 にバインドしinput, keydown, keyup, keypress, focus and blurます。次に、のようなあらゆる種類のキーに対して特別な処理を行いますpage up, page down, up arrow key and down arrow key。テキストボックスの内容を取得する前にタイマーが使用されます。ユーザーがコマンドに対応しないキー (アップ キー、ダウン キーなど) を入力すると、約 300 ミリ秒後にコンテンツを探索するタイマーがあります。コードでは次のようになります。

// switch statement in the 
switch( event.keyCode ) {
            //...
            case keyCode.ENTER:
            case keyCode.NUMPAD_ENTER:
                // when menu is open and has focus
                if ( this.menu.active ) {
                    // #6055 - Opera still allows the keypress to occur
                    // which causes forms to submit
                    suppressKeyPress = true;
                    event.preventDefault();
                    this.menu.select( event );
                }
                break;
            default:
                suppressKeyPressRepeat = true;
                // search timeout should be triggered before the input value is changed
                this._searchTimeout( event );
                break;
            }
// ...
// ...
_searchTimeout: function( event ) {
    clearTimeout( this.searching );
    this.searching = this._delay(function() { // * essentially a warpper for a setTimeout call *
        // only search if the value has changed
        if ( this.term !== this._value() ) { // * _value is a wrapper to get the value *
            this.selectedItem = null;
            this.search( null, event );
        }
    }, this.options.delay );
},

タイマーを使用する理由は、UI が更新される機会を得るためです。Javascript の実行中は UI を更新できないため、遅延関数を呼び出します。これは、(そのコードで使用される) テキストボックスにフォーカスを維持するなど、他の状況でうまく機能します。

したがって、jQuery UI を使用していない場合 (または私の場合はカスタム ウィジェットを開発している場合) は、ウィジェットを使用するか、独自のウィジェットにコードをコピーできます。

于 2012-05-15T04:25:26.113 に答える
2

テキストボックスの内容がリアルタイムでいつ変更されたかを検出しようとしている理由をお聞きしたいのですが?

別の方法として、(setIntval? を使用して) タイマーを設定し、最後に保存された値と現在の値を比較してから、タイマーをリセットすることもできます。これにより、キー、マウス、考慮していない他の入力デバイス、またはアプリの別の部分から値を変更する JavaScript (誰も言及していない別の可能性) が原因であるかに関係なく、すべての変更を確実にキャッチできます。

于 2009-09-26T13:38:43.173 に答える
2

変更イベントの使用を検討しますか?

$("#myTextBox").change(function() { alert("content changed"); });
于 2009-09-26T12:57:53.067 に答える
0

ここに完全な動作例があります。

<html>
<title>jQuery Summing</title>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
$(document).ready(function() {
$('.calc').on('input', function() {
var t1 = document.getElementById('txt1');
var t2 = document.getElementById('txt2');
var tot=0;
if (parseInt(t1.value))
tot += parseInt(t1.value);
if (parseInt(t2.value))
tot += parseInt(t2.value);
document.getElementById('txt3').value = tot;
});
});
</script>
</head>
<body>
<input type='text' class='calc' id='txt1'>
<input type='text' class='calc' id='txt2'>
<input type='text' id='txt3' readonly>
</body>
</html>
于 2014-11-30T12:00:34.727 に答える