如何判斷文本輸入字段dom節點是否*不具有javascript選擇？

Question

當我檢查inputFieldDomNode.selectionStart它總是返回一些數字，即使它沒有文本選擇並且沒有插入符號。 那么如何判斷它是否沒有文本選擇呢？

Answer 1

至少全局窗口，您可以使用Selection.isCollapsed

window.getSelection().isCollapsed

盡管有兼容性表，我發現它在Chrome中工作，顯然它也得到了IE 9的支持。

Answer 2

您可以檢查是否選擇了以下內容：

document.getElementById("color-red").checked

這將返回一個布爾值。

如果這是你想要的，請查看http://jsfiddle.net/o5t0ow9g/1/上的示例

Answer 3

我認為（但不是100％肯定）如果元素不是文檔的活動元素，則它不能有文本選擇。 您可以使用document.activeElement對其進行測試：

if (inputFieldDomNode == document.activeElement) {
    // Do stuff with the selection
}

示例： http ： //jsfiddle.net/hpseuLj3/1/

Answer 4

好吧我明白了：

exports.getSelectionRange = function (element) {
    if(element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
        var selection = window.getSelection()
        for(var n=0; n<selection.rangeCount; n++) {
            var range = selection.getRangeAt(0)
            if(range.startOffset === range.endOffset && range.startContainer.children[range.startOffset] === element /*|| range.startContainer === element || */) { // I don't think the input or textarea itself will ever be the startContainer
                return [element.selectionStart, element.selectionEnd]
            }
        }
        // else return undefined - the element doesn't have an active caret or active selection (it still may have an inactive selection)
    } else {
        // .. do something else unrelated to this question
    }
}

基本上，當你有一個活動文本輸入時，它的父項是range.startContainer ，所以你不僅要檢查它是range.startContaine的子項，還要確保它是正確的子項（被選中的子項），這是由range.startOffset決定。 此外，您必須確保輸入是唯一選擇的內容，因為輸入可以包含在更大的選擇中。

注意：我認為在實際輸入節點是唯一選擇的而不是其內容的情況下，這可能仍會失敗。 這是一個非常罕見的邊緣情況，我不確定它是否可能通過用戶輸入（可能通過dom API）。