ContentEditable元素 - 光标返回可编辑文本的开头

Question

我有一个contentEditable标头。它只允许一行并且不显示溢出，因此它保留在页面上的指定空间中，如下所示：

<h2 id="element" contentEditable="true"></h2>

#element {
    white-space: nowrap;
    overflow: hidden;
}

然后，用户可以编辑文本并根据需要进行编辑。无论用户输入了多少文本，我都希望光标在从标题中聚焦时返回到文本的开头。 （这样，如果他们输入一堆文字，当他们不编辑时，他们总会看到它的第一部分。）

我已尝试过以下内容（＆＃34;主页＃34;密钥代码为36），但我无法将光标移回元素的开头。

var element = $('#element');

element.on('focusout', function() {
    var evt = $.Event('keydown', {keyCode: 36});
    element.trigger(evt);
});

当我点击它时，有什么想法让光标回到元素的开头？

jQuery或vanilla都很好。

Answer 1

对此工作（如果不是特别好）的解决方案是在使用element.innerHTML = element.innerHTML;未聚焦时重置元素的html。执行此操作时，大多数浏览器会将光标移回到开头。但是，如果元素中有很多复杂的标记，这不是一个好主意，因为这会导致所有内容重新绘制。

Answer 2

正如@ firefoxuser_1所提到的，要做的是重新设置内部html。但是，我发现我必须清空内部html，等待破折号，然后重新应用它。例如：

var value = myElement.innerHTML;
myElement.innerHTML = '';
setTimeout(function() {
    myElement.innerHTML = value;
}, 1);

Answer 3

在jQuery中。您可以克隆当前元素。在原始元素之后添加克隆，然后将其删除。

以下是一个例子：

// target is the editable div and clone is its copy
var target = $(".editableContent");
var clone = target.clone();
target.after(clone).remove();