在Internet Explorer中使用sprited按鈕和selection.createRange（）時獲取所選文本時出現問題

Question

我正在努力在Stackoverflow心愛的WMD降價編輯器中實現sprited按鈕，我遇到了一個奇怪的錯誤。 在IE的所有版本中，所選文本在按鈕單擊時丟失，因此，例如，突出顯示一個文本塊並單擊代碼按鈕就像將光標放在選擇的末尾並單擊按鈕一樣。

例如突出顯示：

This
Is
Code

並單擊代碼按鈕為您提供：

This
Is
Code`enter code here`

真正奇怪的是我離開了原來的非sprited按鈕欄， 並且工作得很好。 實際上所有按鈕和鍵盤快捷鍵代碼都使用相同的doClick(button)功能！

• 舊式非sprited按鈕：好的
• 鍵盤快捷鍵：好的
• 非IE瀏覽器中的Sprited按鈕：好的
• IE中的Sprited按鈕： WTF

我把問題分解為對selection.createRange()的調用， 它只在單擊sprited按鈕時找不到任何內容。 我已經嘗試過使用focus（）並確保在doClick()之前盡可能少地發生但沒有快樂。 鍵盤快捷鍵似乎有效，因為輸入textarea永遠不會丟失焦點。 任何人都可以想到一個黑客會讓我以某種方式收集IE中的選定文本？

onclick處理程序如下所示：

button.onmouseout = function(){
  this.style.backgroundPosition = this.XShift + " " + normalYShift;
};

button.onclick = function() {
  if (this.onmouseout) {
    this.onmouseout();
  }
  doClick(this);
}

我已經嘗試將onmouseout調用移動到doClick之后， doClick導致焦點丟失，但這不是問題。

編輯：

唯一似乎不同的是，在原始按鈕代碼中，您單擊圖像。 在sprited代碼中，您單擊列表項<li>並設置了背景圖像。 也許它試圖在我的列表項中選擇不存在的文本？

/編輯

實際代碼位於button-cleanup分支中的git上的wmd存儲庫中。

如果您恢復為0d6d1b32bb42a6bd1d4ac4e409a19fdfe8f1ffcc提交，則可以看到兩個按鈕欄。 最上面的一個是sprited並表現出奇怪的行為。 底部包含原始按鈕欄的殘余，工作正常。 可疑代碼位於TextareaState對象的setInputAreaSelectionStartEnd()函數中。

我要提到的最后一件事是，暫時，我試圖將控件保持在純Javascript中，所以我想避免使用像jQuery這樣的外部庫來解決這個問題。

謝謝你的幫助！

Answer 1

我知道我自己的問題的答案是什么。

sprited按鈕使用HTML列表和CSS實現，其中所有列表項都具有背景圖像。 使用CSS移動背景圖像以顯示不同的按鈕和狀態（如鼠標懸停突出顯示）。 標准的CSS按鈕spriting東西。

這在IE中工作正常，但有一個例外：當您單擊背景圖像“按鈕”時，IE會嘗試選擇空列表文本。 輸入textarea中的選擇消失，當前選擇（將由document.selection.createRange（）返回）移動到列表項中的空文本。

解決這個問題很簡單 - 我創建了一個變量來緩存選擇和一個標志。 在IE中，我緩存選擇並在mousedown事件處理程序中設置標志。 在文本處理中，我檢查是否存在標志 - 如果設置了，我使用緩存范圍而不是查詢document.selection.createRange（）。

以下是一些代碼段：

wmd.ieCachedRange = null;
wmd.ieRetardedClick = false;

if(global.isIE) {
  button.onmousedown =  function() { 
    wmd.ieRetardedClick = true;
    wmd.ieCachedRange = document.selection.createRange(); 
  };
}


var range;
if(wmd.ieRetardedClick && wmd.ieCachedRange) {
  range = wmd.ieCachedRange;
  wmd.ieRetardedClick = false;
}
else {
  range = doc.selection.createRange();
}

該解決方案只有幾行代碼，避免了亂用DOM並可能產生布局引擎問題。

謝謝你的幫助，Cristoph。 我在思考和谷歌搜索你的答案時想出了答案。

Answer 2

在IE可以選擇頁面上的任何其他內容之前，您必須blur()按鈕。

你能提供一個重現錯誤的最小例子（只包含相關代碼）嗎？