Javascript 使用contenteditable

好的，我可以很好地编辑我DIV的内容。然而，有几件事我正在努力解决

在我的可编辑div中，我有一个包含站点地址的div（比如twitter.com），我不想从可编辑div中删除它；它存在的原因是用户可以复制包括域在内的所有文本

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

如果用户删除了域名，它会重新出现，但插入符号现在在它的左边，我也不想看到

关于使插入符号始终可见并将其保留在域的右侧，有什么解决方案吗

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

这是我的小提琴：


CSS:

HTML:

http://twitter.com/username

JS:

var analyzeText=function（）{
var textbox=document.getElementById（'textbox'）；
var textVal=textbox.innerHTML；
var urlString=http://twitter.com/';
if（textVal.length

这里有一个使用选择和范围的方法

（如果你查看MDN，你会注意到IE9不支持——在IE9之前，你必须使用专有的IE脚本。谷歌可以帮助你！）

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

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

if（textVal.length

就这样！这里有一个更新的小提琴来演示：

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

---

为要编辑的内容添加一个范围，并将该范围设置为可编辑，怎么样？twitter.com/username为什么是span？如果我创建可编辑的div内联块，也会出现同样的问题。@SaravananS哦，这不起作用，因为我无法再同时复制域和用户名。是的。这将不能满足您的第一个用例。嗯，这段代码似乎有点问题。。。有时，当域重新出现时，它会将插入符号放在新行上。此外，如果用户只需单击域的左侧，他们就可以在那里键入（显然这是一个比新行bug更简单的修复）@charlesjohnthompsonii Haha在IE评论中。我没有看到的新行错误-您使用什么浏览器进行测试？（我在Mac上，用Chrome和FireFox测试过）如果你在域名重新出现后再次删除它，那就是在创建新行时。我明白了，这似乎只是一个Safari问题。看起来，如果插入一个空文本节点，Safari会决定添加几个

br

标签来发出咯咯的笑声（或者，检查器显示…），我更新了一个不是空的文本节点，Safari的表现会更好。

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

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