如何確定哪些元素在具有多個瀏覽上下文的頁面（父級，iframe，可選的多個iframe）中具有非活動選擇？

的document.activeElement attribute:如何確定哪些元素在具有多個瀏覽上下文的頁面（父級，iframe，可選的多個iframe）中具有非活動選擇？

返回當前焦點元素，也就是說，將獲得按鍵事件的元素，如果用戶鍵入任何

這是明確的單個瀏覽器上下文（單文檔+窗口）。如果可聚焦元素（input，textarea contenteditable元素）具有可見的選擇，則它將是document.activeElement元素。

當頁面上有一個或多個iframe並且它們具有可聚焦元素時，行爲會發生變化。

如果關注iframe中的輸入，則父文檔的activeElement屬性將指向該iframe的iframe元素（實際爲節點）。然而，在可聚焦元素的任何先前選定的文本將保持明顯的選擇，雖然它以可視方式顯示無效（變灰）：

如果再焦點回到父文檔中輸入，iframe的輸入將不再iframe的文檔的activeElement，並且它也將出現明顯的選擇，雖然不活動：

我如何檢查在document任何可獲得焦點的元素有明顯的選擇，甚至WH這不是文件的activeElement？

編輯

我做了一個演示操場來說明問題：http://codepen.io/acusti/pen/PGakzY?editors=0010

來源

2016-10-11 Andrew Patton

@guest271314我指出了正確的方向來解決這個問題。如this demo所示，使用document.getSelection()可讓您在具有可見選擇的瀏覽上下文中查找任何可聚焦元素，即使它們處於「非活動狀態」時也是如此，因爲不同的瀏覽上下文（或其他瀏覽器窗口或瀏覽器的一部分）處於活動狀態。 getSelection() API確實需要一些額外的邏輯來處理它可能返回的不同類型的東西。但爲了識別具有可聚焦元素（輸入，textarea）的選擇，在使用document.getSelection()，然後在返回的選擇對象中檢查anchorNode找到childNodes && childNodes.length後，可以通過訪問selection.anchorNode.childNodes[selection.anchorOffset]可靠地獲取具有選擇的元素。

來源

2016-10-18 09:16:35

你可以存儲在陣列中的.activeElement或選擇;例如在一個事件中，然後選擇數組的索引array.length - 2上的元素或選擇。

也How to clear the contents of an iFrame from another iFrame見，How to pass css :active pseudo class to javascript?

來源

2016-10-12 00:09:20 guest271314

感嘆。我希望有另一種方式。緩存以前的activeElement不是一種可靠的方式來確定選擇是否仍然可見。例如，如果您在iframe中並且在輸入中有選擇內容，則單擊一個單獨的iframe輸入，該選擇仍然可見（但顯示爲不活動）。但是，如果從所選輸入單擊到*相同* iframe的主體，則選擇將不再可見。對於這兩種情況，iframe的document.activeElement將不再是選定文本的輸入，而是無法分辨iframe的正文。 –

@AndrewPatton見http://stackoverflow.com/questions/3169786/clear-text-selection-with-javascript – guest271314

所以'window.getSelection'實際上是缺少的一塊！它將在瀏覽上下文中返回「非活動」可見選擇。現在我需要弄清楚如何使用'document.selection.createRange'作爲我的後備。如果您想使用window.getSelection作出答案（或編輯現有的答案），我很樂意接受它，否則我會自己創建一個答案。謝謝！ –

如何確定哪些元素在具有多個瀏覽上下文的頁面（父級，iframe，可選的多個iframe）中具有非活動選擇？

回答

相關問題