케이스 ce-0115-table-tab-navigation-ko · 시나리오 scenario-table-editing

Tab 키가 다음 셀로 이동하는 대신 탭 문자를 삽입함

OS: Windows 11 기기: Desktop or Laptop Any 브라우저: Chrome 120.0 키보드: US 초안
tabletabnavigationchrome

현상

contenteditable 요소에서 테이블 셀을 편집할 때 Tab을 누르면 다음 셀로 이동하는 대신 탭 문자가 삽입됩니다. 이것은 테이블 탐색을 어렵게 만듭니다.

재현 예시

  1. contenteditable에 테이블을 만듭니다
  2. 테이블 셀 내부를 클릭합니다
  3. Tab 키를 누릅니다

관찰된 동작

  • 탭 문자가 셀에 삽입됩니다
  • 커서가 다음 셀로 이동하지 않습니다
  • 테이블 탐색이 깨집니다
  • 사용자가 셀 간을 쉽게 탐색할 수 없습니다

예상 동작

  • Tab은 다음 셀로 이동해야 합니다
  • Shift+Tab은 이전 셀로 이동해야 합니다
  • 탭 문자가 삽입되지 않아야 합니다
  • 탐색이 스프레드시트 애플리케이션처럼 작동해야 합니다

브라우저 비교

  • 모든 브라우저: Tab이 문자를 삽입함 (기본 동작)
  • 테이블 탐색을 위한 사용자 정의 처리 필요

참고 및 해결 방법 가능한 방향

  • 테이블 셀에서 Tab 키 가로채기
  • 기본 동작 방지
  • 다음/이전 셀 찾기
  • 커서를 다음 셀로 이동
  • 엣지 케이스 처리 (마지막 셀, 첫 번째 셀)

이 시나리오의 변형

케이스 OS 브라우저 상태
ce-0115-table-tab-navigation-ko Windows 11 Chrome 120.0 초안
ce-0126-table-cell-editing-breaks-ko Windows 11 Safari 17.0 초안
ce-0148-table-paste-breaks-structure-ko Windows 11 Chrome 120.0 초안
ce-0158-table-cell-selection-difficult-ko Windows 11 Chrome 120.0 초안
ce-0171-table-row-deletion-difficult-ko Windows 11 Chrome 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: Chrome 120.0
Keyboard: US
Your environment
Sample HTML:
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.