<textarea> pageUp & pageDown KeyDown 시 틀어짐 문제 해결 방법

textarea 자체 버그같은 것임. 

몇년은 된 버근데 그냥 안고치는듯.

기본 동작 막고 커스텀 해줘야 함. 

 

vanillaJS 로 쉽게 해결 가능. 

document.querySelector('textarea').addEventListener('keydown', event => {
  if (event.key === 'PageUp' || event.key === 'PageDown') {
    
    // 1. 기본 동작 하지 않도록 하는 코드
    event.preventDefault();
    
    // 2. 커서 포지션 변경
    const cursorPosition = event.key === 'PageUp' ? 0 : event.target.textLength;
    event.target.setSelectionRange(cursorPosition, cursorPosition);
    
    // 3. 스크롤 이동 로직 추가
    const scrollPosition = event.key === KeyboardShortCut.PageUp ? 0 : event.target.scrollHeight;
    event.target.scrollTop = scrollPosition; 
  }
});

 

 

## 참고

Prevent PageUp and PageDown press in textarea moving website out of the window · GitHub

Prevent PageUp and PageDown press in textarea moving website out of the window

890248 - PageUp and PageDown in textarea moves website out of the window - chromium

890248 - chromium - An open-source project to help move the web forward. - Monorail