我有令人满意的div与不可编辑的"岛屿".一切都运行良好,直到不可编辑的部分是可编辑div中的最后一件事.在这种情况下,光标不是在不可编辑的后面,而是在可编辑div的最后.
看到这个例子,我借用了这个问题
这是你可以尝试的小提琴:http://jsfiddle.net/RYsvZ/2/ .当你删除末尾的点时,光标会跳开.这种行为与safari和chrome有关.我想这是webkit问题.
这是代码示例:
<div contenteditable="true" class="editor">
Sample template with <span class="mergecode" contenteditable="false">MergeCode1</span>.
</div>
你知道它为什么会发生以及如何解决它吗？
我正在尝试使用contenteditable. 在这个 MCVE 中，它只有一个功能，就是给选中的文本一个红色高亮。†
我正在使用的代码在这里：
function createSpan() {
let selection = document.getSelection();
let range = selection.getRangeAt(0);
let element = document.createElement("span");
element.className = "inline-equation";
range.surroundContents(element);
let newRange = new Range();
newRange.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(newRange);
}
$("button").click(createSpan).inline-equation {
background-color: red;
display: inline-block;
}
#editor {
width: 100%;
height: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Create Span
</button>
<div id="editor" contenteditable="true">
This is a contenteditable area.
</div>我对用户可能会移出突出显示区域并继续输入无格式文本的想法感到困惑。要体验这个问题：
这个新文本也有红色突出显示，即使您试图span通过按右箭头键移出插入的文本。
我仍然希望为用户提供附加格式化的新文本的选项，但同时也允许用户导航出来，span以便他们可以继续输入普通文本。
换句话说， …