使用 contenteditable答案

【问题标题】：Working with contenteditable使用 contenteditable
【发布时间】：2014-06-24 02:19:12
【问题描述】：

好的，所以我可以很好地编辑我的 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();})();

【问题讨论】：

如何为要编辑的内容添加一个跨度并使该跨度可编辑？

twitter.com/</div><span contenteditable="true" >用户名
为什么是跨度？如果我制作可编辑的 div 内联块，也会出现同样的问题。
@SaravananS 哦，这不起作用，因为我不再能够同时复制域和用户名。
是的。这将无法满足您的第一个用例。

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