如何檢測文本框的內容已更改

我想檢測什麼時候文本框的內容已更改。 我可使用keyup方法，可是它也將檢測不生成字母的擊鍵，例如箭頭鍵。 我想到了使用keyup事件執行此操做的兩種方法：

1. 仔細檢查所按鍵的ASCII碼是否爲字母\\退格\\刪除
2. 使用閉包來記住按鍵以前文本框中的文本，並檢查是否已更改。

二者看起來都很麻煩。

---

#1樓

我建議您看一下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（或者在個人狀況下開發自定義窗口小部件），則可使用窗口小部件或將代碼複製到本身的窗口小部件中。

---

#2樓

'change'事件沒法正常運行，可是'input'是完美的。

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

---

#3樓

在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');
        }
    });
});

---

#4樓

您是否考慮使用更改事件 ？

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

---

#5樓

使用閉包來記住按鍵以前複選框中的文本，並檢查是否已更改。

是的 您不必定必須使用閉包，可是您須要記住舊值並將其與新值進行比較。

然而！ 這仍然沒法捕獲全部更改，由於有一種方法能夠編輯不涉及任何按鍵的文本框內容。 例如，選擇一個文本範圍，而後單擊鼠標右鍵。 或拖動它。 或將文本從另外一個應用程序拖放到文本框中。 或經過瀏覽器的拼寫檢查更改單詞。 要麼...

所以，若是必須檢測每一個更改，則必須進行輪詢。 您能夠window.setInterval每秒（例如）每秒對照該字段的先前值進行檢查。 你也能夠連線onkeyup相同的功能，使得由按鍵形成的更改都將反映更快。

笨拙的？ 是。 就是這樣，或者只是以普通的HTML onchange方式進行操做，不要嘗試當即更新。