html - 无法使用键盘在 Chrome 的 contenteditable 中选择文本

Question

在 Chrome 中，当文本包含一个换行到下一行的长字符串时，我无法使用 Chrome 中的键盘选择 contenteditable 文本上下文。

这个 repro 在 Chrome 中(最新；我写这篇文章时是 Chrome 47)。

重现步骤

1. 单击以将光标置于 contentedtable div 的末尾(在下面的代码片段中)。
2. 按住 shift 键并多次点击向上箭头。

预期:所有文本都被选中。

观察到:空格前的文本(“foo”)从未被选中。

这是代码。注意“foo”后面的字符是空格，不是换行符!

<div contenteditable="true" style="background: #ddd; width: 200px; height: 100px;">foo asdfjkl;asdfjkl;asdfjkl;asdfjkl;asdfjkl;asdfjkl;asdfjkl;</div>

Answer 1

实际上，这通常是文本框的正确行为。

在这种情况下，您会在不同的行中看到这两个词，因为第二个词比容器宽，因此您会看到一个换行符并尝试使用向上箭头来选择“foo ".

但是，正如您在问题中所说，“foo”之后有一个空格字符，因此您必须使用左箭头 来选择它。

试想同样的情况，但使用全宽文本框，您只会尝试使用左箭头。此处仅更改样式，不更改该特定内容的行为。