無法使用鍵盤在Chrome瀏覽器中選擇內容中的文本

Question

在Chrome瀏覽器中，當文本包含包含下一行的長字符串時，我無法使用Chrome中的鍵盤選擇內容匹配的文本上下文。

這個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

其實，這是一般的文本框的正確行爲。

在這種情況下，您看到兩個單詞在不同的行中，因爲第二個單詞比容器更寬，因此您會看到換行符，並嘗試使用up arrow來選擇「foo」。

但是，正如您在問題中所說的，在「foo」之後有一個空格字符，因此您必須使用left arrow來選擇它。

想象一下相同的情況，但使用全寬文本框，您只會嘗試使用left arrow。只有風格在這裏變化，而不是特定內容的行爲。