javascript - テキスト入力フィールドの dom ノードが javascript で選択されていないかどうかを確認するにはどうすればよいですか?

Question

チェックinputFieldDomNode.selectionStartすると、テキスト選択がなく、キャレットがない場合でも、常に何らかの数値が返されます。では、テキスト選択がないかどうかはどうすればわかりますか?

Answer 1

要素がドキュメントのアクティブな要素でない場合、テキストを選択することはできないと思います (ただし、100% 確実ではありません)。次を使用してテストできますdocument.activeElement。

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

例: http://jsfiddle.net/hpseuLj3/1/

Answer 2

わかりました：

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 を介して可能です)。

Answer 3

次のような方法で要素が選択されているかどうかを確認できます。

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

ブール値を返します。

それが必要な場合は、http://jsfiddle.net/o5t0ow9g/1/で例を確認してください。