предотвратяване на избиране на следващ dom при dbщракване върху текст в contenteditable

Имам следния contenteditable div, със смесен текст и dom вътре, както следва:

some text<span> which i would </span><span>like to select </span>

Проблемът ми е, че бих искал да предотвратя двойно щракване върху дума, за да избера span arround. Например, ако щракна два пъти върху думата „което“, тя избира само тази дума и това е необходимото поведение. Но проблемът е, че ако избера думата 'would', тя избира 'would'. Как мога да избера само „ще“ без обхват при събитие двойно щракване?

Опитах се да добавя интервал преди и след, но без резултат.


html jquery contenteditable
person user2733521    schedule 01.07.2015    source източник

Отговори (1)


arrow_upward
0
arrow_downward

Просто добавете този малък фрагмент от javascript и отделни думи ще могат да се избират в рамките на span елементи:

$('span').dblclick(function(e){
    e.preventDefault();
    var selection = window.getSelection();
    if (selection.toString().indexOf(' ') > -1)
    {
        var range = selection.getRangeAt(0);
        var start = range.startOffset;
        var finish = range.endOffset - 1;
        setSelectionRange(this, start, finish);
    }
});

function getTextNodesIn(node) {
    var textNodes = [];
    if (node.nodeType == 3) {
        textNodes.push(node);
    } else {
        var children = node.childNodes;
        for (var i = 0, len = children.length; i < len; ++i) {
            textNodes.push.apply(textNodes, getTextNodesIn(children[i]));
        }
    }
    return textNodes;
}

function setSelectionRange(el, start, end) {
    if (document.createRange && window.getSelection) {
        var range = document.createRange();
        range.selectNodeContents(el);
        var textNodes = getTextNodesIn(el);
        var foundStart = false;
        var charCount = 0, endCharCount;

        for (var i = 0, textNode; textNode = textNodes[i++]; ) {
            endCharCount = charCount + textNode.length;
            if (!foundStart && start >= charCount
                    && (start < endCharCount ||
                    (start == endCharCount && i <= textNodes.length))) {
                range.setStart(textNode, start - charCount);
                foundStart = true;
            }
            if (foundStart && end <= endCharCount) {
                range.setEnd(textNode, end - charCount);
                break;
            }
            charCount = endCharCount;
        }

        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.selection && document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(true);
        textRange.moveEnd("character", end);
        textRange.moveStart("character", start);
        textRange.select();
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
some text<span> which i would </span><span>like to select </span>

person omikes    schedule 01.07.2015
comment
Проблемът ми възниква дори ако съм извън елемент на обхват. Например, ако щракна два пъти върху думата „текст“, която е извън интервал, получавам следния интервал в моя избор „текст‹span›“ и искам само „текст“ - person user2733521; 02.07.2015