Question

好的，所以我能够很好地编辑DIV的内容。但是，我正在努力解决一些问题。

在我的可编辑div中，我有一个包含网站地址的div（例如twitter.com），我不希望它可以从可编辑的DIV中删除;它存在的原因是用户可以复制包括域名在内的所有文本。

如果删除除域之外的所有文本，则插入符号不显示 - 或者它在DIV右侧一直显示。

如果用户删除了域名，它会重新出现，但是插入符号现在位于其左侧，我也不想要。

任何使插入符号始终可见并将其保留在域右侧的解决方案？

哦，由于某种原因，我不能在可编辑的DIV上使用onKeyDown来激活anylyeText函数（至少不在JSfiddle中），所以我不得不做一个setTimeout循环。

这是我的小提琴：jsfiddle

CSS：

.url {
    display: block;
    border: 1px solid rgb(140,140,140);
    padding: 5px;
    box-sizing: border-box;
    color: rgb(35,155,215);
    cursor: text;
    outline: none;
}
.url:focus {
    border-color: rgb(35,155,215);
}

.noedit {
    display: inline;
    color: rgb(140,140,140);
}

HTML：

<div class="url" contenteditable="true" id="textbox"><div class="noedit" contenteditable="false">http://twitter.com/</div>username</div>

JS：

var analyzeText = function() {
    var textbox = document.getElementById('textbox');
    var textVal = textbox.innerHTML;
    var urlString = '<div class="noedit" contenteditable="false">http://twitter.com/</div>';

    if (textVal.length < urlString.length) {
        textbox.innerHTML = urlString;
        textbox.focus();
    }
    setTimeout(function() { analyzeText(); }, 100);
};

(function(){analyzeText();})();

Answer 1

这是使用选择和范围的方法。

MDN Selection
MDN Range

（如果您查看MDN，您会发现IE9支持不存在 - 在IE9之前，您必须使用专有的IE脚本.Google可以帮助您！）

我要做的第一件事是添加这两个变量：

var range = document.createRange();
var sel = window.getSelection();

然后，我修改了你的脚本：

if (textVal.length < urlString.length) {
    textbox.innerHTML = urlString;

    // We create a text node and append to the textbox to select it
    textbox.appendChild(document.createTextNode(''));

    // Text node is selected
    range.setStart(textbox.childNodes[1], 0);

    // Collapse our range to single point (we're not selecting a word, after all!)
    range.collapse(true);

    // Let's clear any selections
    sel.removeAllRanges();

    // Alright, time to position our cursor caret!
    sel.addRange(range);

    textbox.focus();
}

就是这样！这是一个更新的小提琴演示：

编辑 - 更新为包含阻止用户在域左侧插入文本的逻辑

http://jsfiddle.net/Qycw2/6/

与contenteditable合作

1 个答案: