div contenteditable標簽的setStart

Question

我使用auto.js進行單詞自動提示，因為我必須選擇單詞。

 function SelectChar(el, start, end) { //el=document.getElementById(textbox) start=3 and end=5
        var div = el;
        var textNode = div.firstChild;
        if (textNode.data.length > 1) {
            var rangeObj = document.createRange();
            rangeObj.setStart(textNode, start);
            rangeObj.setEnd(textNode, end);

            selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(rangeObj);
        }
    }

當我按Enter ，添加兩次<br></br>

<div id="textbox" contenteditable="true">hi<br><br>the</div>

但由於div.firstChild而選擇范圍不在第二行。.我想用在<br>之后也可以進行選擇的東西替換行。請給我提出任何想法... jsfiddle （實際代碼）

Answer 1

您可以使用window.getSelection（）; 和selection.anchorNode;

AutoSuggestControl.prototype.typeAhead = function (sSuggestion /*:String*/) {
    //    debugger
    var selection = window.getSelection();
    var anchorNode = selection.anchorNode;

    var lastSpace = anchorNode.textContent.lastIndexOf(" ");
    var lastQuote = anchorNode.textContent.lastIndexOf("'");
    var lastHypen = anchorNode.textContent.lastIndexOf("-");
    var lastDoubleQuote = anchorNode.textContent.lastIndexOf('"');
    var lastEnter = anchorNode.textContent.lastIndexOf("\n");
    var lastIndex = Math.max(lastSpace, lastEnter, lastQuote, lastHypen, lastDoubleQuote) + 1;
    var contentStripped = anchorNode.textContent.substring(0, lastIndex);
    var lastWord = anchorNode.textContent.substring(lastIndex, anchorNode.textContent.length);

    anchorNode.textContent = contentStripped + sSuggestion;

    var start = anchorNode.textContent.length - sSuggestion.replace(lastWord, "").length;
    var end = anchorNode.textContent.length;
    SelectChar(anchorNode, start, end);
};

並使用selection.getRangeAt（0）;

function SelectChar(el, iStart, iLength) {
    var selection = window.getSelection();
    var range = selection.getRangeAt(0);
    range.setStart(el, iStart);
    range.setEnd(el, iLength);
    selection.removeAllRanges();
    selection.addRange(range);
}

我認為您最好只關注當前的輸入選擇 。

wordSuggestions.prototype.requestSuggestions = function (oAutoSuggestControl /*:AutoSuggestControl*/) {
    var aSuggestions = [];
    var selection = window.getSelection();
    var anchorNode = selection.anchorNode;

    var sTextbox = anchorNode.textContent;
    var sTextboxSplit = sTextbox.split(/[\s,]+/);
    var sTextboxLast = sTextboxSplit[sTextboxSplit.length - 1];
    var sTextboxValue = sTextboxLast;
    if (sTextboxValue.length > 0) {
        //search for matching words
        for (var i = 0; i < this.words.length; i++) {
            if (this.words[i].indexOf(sTextboxValue.toLowerCase()) == 0) {
                if (this.words[i].indexOf(sTextboxValue) == 0) {
                    aSuggestions.push(this.words[i]);
                }
                else if (this.words[i].indexOf(sTextboxValue.charAt(0).toLowerCase() + sTextboxValue.slice(1)) == 0) {
                    aSuggestions.push(this.words[i].charAt(0).toUpperCase() + this.words[i].slice(1));
                }
            }
        }
    }
    //provide suggestions to the control
    oAutoSuggestControl.autosuggest(aSuggestions);
};

這是一個現場演示，從您的源中進行了分叉和修改。 http://jsfiddle.net/soonsuweb/bcpy0wjn/