web-dev-qa-db-ja.com

テキストボックスのコンテンツを検出する方法が変更されました

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

  1. 押されたキーのASCIIコードが文字\ backspace\deleteであるかどうかを正確に確認してください。
  2. クロージャを使用して、キーストローク前のテキストボックス内のテキストが何であったかを覚えておき、これが変更されたかどうかを確認します。

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

javascriptjquerytextboxkeypress
399
olamundo

'change'ではなく 'input'イベントを観察し始めてください。

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

...これは素晴らしくきれいですが、さらに拡張することもできます。

jQuery('#some_text_box').on('input propertychange paste', function() {
    // do your stuff
});
688
Atul Vani

HTML /標準JavaScriptのonchangeイベントを使用してください。

JQueryではそれが change（） イベントです。例えば：

$('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');
        }
    });
});
65
Waleed Amjad

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

$('#your_textbox').bind('input', function() {
    /* This will be fired every time, when textbox's value changes. */
} );
44
schwarzkopfb

これはどう：

<jQuery 1.7

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

> jQuery 1.7

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

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

36
Catfish

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

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

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

したがって、すべての変更を検出する必要がある場合は、それを調査する必要があります。 window.setIntervalは毎秒（例えば）毎回そのフィールドを以前の値と照合することができます。 onkeyupを同じ関数に配線して、キー押下による are の変更がより早く反映されるようにすることもできます。

面倒ですか？はい。しかし、それはそれであるか、単にそれを通常のHTML onchange方法で実行し、即時更新しようとしないでください。

21
bobince
$(document).on('input','#mytxtBox',function () { 
 console.log($('#mytxtBox').val());
});

あなたはテキストボックスの内容の変化を検出するために 'input'イベントを使うことができます。 Jquery-1.7では廃止予定であるため、イベントをバインドするために 'live'を使用しないでください。 'on'を使用してください。

13
NavaRajan

私はあなたがテキストボックスが変更されたときにあなたが対話的な何かをすることを探していると思います（すなわち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つは、同時に複数の要求を送信したくないため、setTimeを使用し、setIntervalを使用しないことです。これにより、フォームが送信されたときにタイマーが「停止」し、要求が完了したときに「開始」します。私のajax呼び出しが完了したときにcheckSearchChangedを呼び出すことによってこれを行います。明らかにこれを拡張して最小長などをチェックすることができます。

私の場合は、ASP.Net MVCを使用しているので、これをMVC Ajaxと結び付ける方法を次の記事でも確認できます。

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

5
Doug Lampe

私は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を更新できないため、delay関数を呼び出します。これは、テキストボックス（そのコードで使用されている）に焦点を合わせ続けるなど、他の状況でもうまく機能します。

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

4
Michael Yagudaev

テキストボックスの内容が に変更されたのをリアルタイムで検出しようとしているのはなぜですか？ ？

別の方法は、（setIntval？を使って）タイマーを設定し、最後に保存した値を現在の値と比較してからタイマーをリセットすることです。これは、キー、マウス、あなたが考えていなかった他の何らかの入力装置、あるいはJavaScriptがアプリの別の部分から値を変更したこと（他の誰かが言及したことがない）によって引き起こされた変更を捉えることを保証します。

2
DVK

クロスブラウザーtextchange互換性のために、カスタマイズされたjQueryシムを介してinputイベントを使用します。 http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html （最近フォークされたgithub：- https://github.com/pandell/jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js ）

これは、<textarea>content</textarea>を含むすべての入力タグを処理します。これはchangekeyupなどと常に機能するとは限りません（！）jQuery on("input propertychange")のみが<textarea>タグを一貫して処理します上記は、inputイベントを理解しないすべてのブラウザーのシムです。

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/pandell/jquery-splendid-textchange/master/jquery.splendid.textchange.js"></script>
<meta charset=utf-8 />
<title>splendid textchange test</title>

<script> // this is all you have to do. using splendid.textchange.js

$('textarea').on("textchange",function(){ 
  yourFunctionHere($(this).val());    });  

</script>
</head>
<body>
  <textarea style="height:3em;width:90%"></textarea>
</body>
</html>

JS Binテスト

これは、貼り付け、削除も処理し、キーアップの作業を重複させません。

シムを使用しない場合は、jQuery on("input propertychange")イベントを使用します。

// works with most recent browsers (use this if not using src="...splendid.textchange.js")

$('textarea').on("input propertychange",function(){ 
  yourFunctionHere($(this).val());    
});
1
Ber

change event の使用を検討しますか？

$("#myTextBox").change(function() { alert("content changed"); });
1
Canavar

主にfocusとfocusoutが2つの別々の値になってしまうため、このようなものでうまくいくはずです。ここではdataを使用しています。要素に値を格納しますが、DOMには触れないからです。要素に関連付けられた値を格納するのも簡単な方法です。あなたは同じくらい簡単に高いスコープの変数を使うことができます。

var changed = false;

$('textbox').on('focus', function(e) {
    $(this).data('current-val', $(this).text();
});

$('textbox').on('focusout', function(e) {
    if ($(this).data('current-val') != $(this).text())
        changed = true;
    }
    console.log('Changed Result', changed);
}
0
smcjones

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

<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>
0
user586399