Javascript 單元測試中的 setSelectionRange 未按預期運行

Question

我正在使用 qunit 框架與我在 Chrome 中使用 jquery（即 var $textarea = $('')）以編程方式創建的 HTML 進行單元測試交互。 這是我用來更新文本區域中的選擇的代碼。

    TextAreaView.prototype.setSelectionOffsets = function(cursor) {
    var input = this.$textarea.get(0);
    if (!input.setSelectionRange) {
        return;
    }
    if (cursor.start <= input.value.length && cursor.end <= input.value.length) {
        input.focus();
        input.setSelectionRange(cursor.start, cursor.end, "forward");
    }
}

我已經驗證我正在使用 0 < cursor.start == cursor.end < input.value.length 調用此方法。

當我使用調試器單步執行時，一切似乎都正常 - 但在它到達“input.setSelectionRange”行后，檢查輸入元素顯示 selectionEnd 和 selectionStart 屬性 = 0，selectionDirection =“none”

我對這里發生的事情感到很困惑。 我已經閱讀了Mozilla 關於 textarea 元素的文檔，我相信我對 setSelectionRange 的調用是有效的。 這是否與我以編程方式創建文本區域並且實際上並未顯示這一事實有關？

Answer 1

當我輸入問題時找到了這個問題的答案，所以我想我會分享給任何可能偶然發現這個問題的人。 答案很明顯，我基本上是在最后一句話中想到的：我正在用 $('') 創建一個 textarea DOM 元素並存儲 object，但我從未將 object 插入到文檔中。 在我將元素附加到正文后，setSelectionRange 按預期更新選擇。 在我的情況下，在我的單元測試結果頁面上顯示實際的文本區域並不是真正可取的，但這可以通過調用 $textarea.hide() 輕松解決。