javascript - "Scroll back"关于 contenteditable 元素的不聚焦(模糊)？

Question

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

我希望它像文本框一样“回滚”到开头。我已经尝试将插入符号位置设置为开始并且它确实有效，但不会“向后滚动”。 我也试过将内容设置为空(“”)，然后在 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/ .如果您需要更多帮助，请随时发表评论。