ContentEditable 元素 — 光標回到可編輯文本的開頭

Question

我有一個contentEditable標題。 它只允許一行並且不顯示溢出，因此它保留在頁面上的指定空間中，如下所示：

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

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

然后，用戶可以編輯文本並根據需要制作文本。 無論用戶輸入了多少文本，我都希望光標在焦點離開標題時返回到文本的開頭。 （這樣，如果他們輸入一堆文本，當他們不編輯時，他們總是會看到它的第一部分）。

我嘗試了以下（主鍵鍵碼為 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 element.innerHTML = element.innerHTML; . 執行此操作時，大多數瀏覽器會將光標移回開頭。 但是，如果元素中有很多復雜的標記，這不是一個好主意，因為這會導致所有內容都重新繪制。

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