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

Question

我有一个 contentEditable header 。它只允许一行并且不显示溢出，所以它停留在页面上的指定空间，例如:

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

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

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

我已经尝试了以下(home key keycode is 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。当您执行此操作时，大多数浏览器会将光标移回开头。但是，如果元素中有很多复杂的标记，这不是一个好主意，因为这会导致重新绘制所有内容。