无法 select 使用键盘在 Chrome 的 contenteditable 中输入文本

Question

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

此重现 Chrome（最新；Chrome 在我撰写本文时为 47）。

重现步骤

1. 单击以将光标置于内容表 div 的 end（在下面的代码段中）。
2. 按住 shift 键并多次点击向上箭头。

预期：所有文本变为selected。

观察到：space（"foo"）之前的文本从未被select编辑。

这是代码。注意 "foo" 之后的字符是 space，而不是换行符！

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

Answer 1

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

在这种情况下，您会在不同的行中看到这两个词，因为第二个词比容器宽，所以您会看到一个换行符并尝试使用 up arrow 到 select "foo".

但是，正如你在问题中所说，"foo"之后有一个space字符，所以你必须使用left arrow到select它。

想象一下同样的情况，但使用全角文本框，您只会尝试使用 left arrow。此处仅更改样式，不更改该特定内容的行为。