ContentEditable 元素——光标回到可编辑文本的开头

Question

我有一个contentEditableheader。它只允许一行并且不显示溢出，所以它停留在页面上指定的space，如：

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

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

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

我已经尝试了以下（home key keycode is 36），但我无法让光标移回元素的开头。

var element = $('#element');

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

有什么想法可以让我在单击元素时将光标返回到元素的开头吗？

jQuery or 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();

ContentEditable element -- cursor back to beginning of editable text