案例 ce-0025 · 场景 scenario-caret-movement-with-emoji

Arrow keys skip over emoji in contenteditable

操作系统: Windows 11 设备: Desktop or Laptop Any 浏览器: Edge 120.0 键盘: US 草稿
emojicaretarrow-keysedge

此页面尚未翻译

目前显示的是英文原文。欢迎您参与翻译工作。

Phenomenon

In Edge on Windows, when navigating with arrow keys through text containing emoji, the caret position behaves unexpectedly. The arrow keys may skip over emoji characters or position the caret incorrectly.

Reproduction example

  1. Create a contenteditable div.
  2. Type some text with emoji, for example: “Hello 👋 world 🌍”.
  3. Use the left and right arrow keys to move the caret through the text.
  4. Observe the caret position relative to the emoji.

Observed behavior

  • In Edge on Windows, arrow keys may skip over emoji characters.
  • The caret may jump past emoji instead of moving character by character.
  • The visual position of the caret may not match the actual text position.

Expected behavior

  • Arrow keys should move the caret one character at a time, including emoji.
  • The caret should be positioned correctly relative to emoji characters.
  • Navigation should be predictable and consistent.

此场景的变体

案例 操作系统 浏览器 状态
ce-0005 macOS 14.0 Chrome 120.0 草稿
ce-0025 Windows 11 Edge 120.0 草稿

Playground for this case

Use the reported environment as a reference and record what happens in your environment while interacting with the editable area.

Reported environment
OS: Windows 11
Device: Desktop or Laptop Any
Browser: Edge 120.0
Keyboard: US
Your environment

Use this editable area to reproduce the described case.

Event log
Use this log together with the case description when filing or updating an issue.
0 events
Interact with the editable area to see events here.