"Scroll back" 关于 contenteditable 元素的散焦（模糊）？

Question

我有一个 contenteditable 元素，大概应该以相对较小的宽度开始，然后当您将内容放入其中时，它会扩展直到达到最大宽度，从而剪裁内容。

我希望它以"scroll back"开头很像一个文本框。我已经尝试将插入符号位置设置为开头，它确实有效，但没有 "scroll back"。 我也试过将内容设置为空（“”），然后在 1 毫秒后借助 setTimeout 恢复到原来的状态，尽管这是一个非常肮脏的解决方案:(

我不能为此使用文本框，因为我只希望双击后可以编辑内容。有人可以帮忙吗？

HTML:

<section contenteditable='true'>Edit me!</section>

CSS:

section {
    background-color:#ccc;
    display:inline;
    white-space:nowrap;
    max-width:100px;
    position:absolute;
    overflow:hidden;
    padding:10px;
}

Example

Answer 1

您可以使用.scrollLeft 来设置溢出的滚动位置。我为您的部分使用 'onblur' 属性，当该部分不再是焦点时触发，它传递 this 供我们的函数使用，而不是稍后获取元素：

<section contenteditable='true' onblur="resetOverflowPosition(this)">This should be long enough to mean that you can scroll forward and the script will scroll backwards</section>

这里我们将scrollLeft设置为0来重置该部分的当前滚动条，您可以多次使用此功能：

function resetOverflowPosition(element){
    element.scrollLeft = 0;
}

这是一个 JSFiddle：https://jsfiddle.net/np72zxo0/2/。如果您需要更多帮助，请随时发表评论。

"Scroll back" 关于 contenteditable 元素的散焦（模糊）？

"Scroll back" on unfocus (blur) of contenteditable element?

html

javascript

css

contenteditable