javascript - 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);
};

这是一个现场演示，是从您的源代码中 fork 和修改的。 http://jsfiddle.net/soonsuweb/bcpy0wjn/