JS에서 커서를 삭제한 후 입력 상자의 내용을 자동으로 앞으로 이동시키는 방법은 무엇입니까?

웹 애플리케이션을 개발할 때 입력 상자의 내용을 조작해야 하는 시나리오를 자주 접하게 됩니다. 그중에서도 커서를 삭제한 후 입력 상자의 내용을 자동으로 앞으로 이동시키는 것은 일반적이면서도 어려운 요구 사항입니다.

이 글에서는 이 요구 사항을 달성하기 위한 두 가지 방법을 소개합니다. 하나는 JavaScript의 Selection API를 사용하여 텍스트 작업을 수행하는 것이고, 다른 하나는 키보드 이벤트를 시뮬레이션하여 입력 상자의 콘텐츠를 자동으로 앞으로 이동하는 것입니다.

텍스트 조작을 위해 Selection API 사용

Selection API는 JavaScript에서 제공하는 텍스트 조작 API로, 문서에서 선택한 텍스트 부분을 얻고 조작하는 데 사용할 수 있습니다. 이 방법에서는 Selection API를 사용하여 텍스트 콘텐츠 삭제 및 복사를 구현합니다.

먼저 입력 상자의 DOM 노드를 가져와서 여기에 keydown 이벤트 리스너를 바인딩하여 키보드 이벤트를 수신해야 합니다. 사용자가 백스페이스 또는 삭제 키를 누르면 다음 작업이 수행됩니다.

1. document.getSelection() 메서드를 사용하여 현재 선택한 텍스트를 가져옵니다.
2. 선택한 텍스트가 비어 있으면 텍스트 앞의 문자를 의미합니다. Selection API의 수정() 메서드는 선택 범위를 "확장"(즉, 현재 커서 위치와 이전 문자 위치 사이의 텍스트)으로 재설정한 다음 수정( ) 메소드를 다시 사용하여 선택 범위를 "이동"으로 재설정합니다(즉, 커서 앞의 문자를 삭제합니다).
3. 그렇지 않으면 사용자가 텍스트의 일부를 선택하고 선택한 텍스트를 클립보드에 복사한 다음 설정한다는 의미입니다. 선택한 텍스트를 삭제하려면 선택 범위를 "이동"하세요
4. 마지막으로 입력 상자 값을 업데이트하고 커서를 올바른 위치로 이동하세요

다음은 완전한 구현입니다.

const inputField = document.getElementById('input-field');

inputField.addEventListener('keydown', (event) => {
  const selection = document.getSelection();

  if (event.key === 'Backspace' || event.key === 'Delete') {
    const selectedText = selection.toString();

    if (selectedText === '') {
      selection.modify('extend', 'backward', 'character');
      selection.modify('move', 'backward', 'character');
    } else {
      event.clipboardData.setData('text/plain', selectedText);
      selection.deleteFromDocument();
    }

    event.preventDefault();
    inputField.value = inputField.value.substring(0, selection.anchorOffset) + 
                       inputField.value.substring(selection.focusOffset);
    selection.setPosition(selection.anchorNode, selection.anchorOffset);
  }
});

시뮬레이트된 키보드 이벤트를 사용하여 구현

두 번째 구현 방법은 키보드 이벤트를 시뮬레이션하여 입력 상자의 keydown 이벤트를 트리거하여 자동으로 앞으로 이동할 수 있도록 하는 것입니다. 이 방법은 Selection API를 사용할 필요가 없으며 모든 브라우저에서 작동합니다.

먼저 사용자가 백스페이스 또는 삭제 키를 누르는 것을 시뮬레이션하기 위해 시뮬레이션된 키보드 이벤트를 생성해야 합니다. 그런 다음 입력 상자에서 keydown 이벤트를 트리거하고 이벤트 리스너에서 다음 작업을 수행합니다.

1. selectionStart 및 SelectionEnd 속성을 사용하여 현재 선택된 텍스트 범위를 가져옵니다. 선택된 텍스트가 없으면 SelectionStart 및 SelectionEnd는 동일합니다.
2. 사용자가 눌렀는지 확인하세요. 아래 키가 Backspace인지 아니면 Delete인지 판단하세요. Backspace이면 SelectionStart를 1씩 줄이고, 그렇지 않으면 SelectionEnd를 1씩 늘립니다.
3. 입력 상자의 값을 업데이트하고, 현재 커서 위치에 따라 SelectionStart와 SelectionEnd를 재설정하세요

구현 코드는 다음과 같습니다.

const inputField = document.getElementById('input-field');

document.addEventListener('keydown', (event) => {
  const selectionStart = inputField.selectionStart;
  const selectionEnd = inputField.selectionEnd;

  if (event.key === 'Backspace') {
    inputField.value = inputField.value.substring(0, selectionStart - 1) + 
                       inputField.value.substring(selectionEnd);
    inputField.selectionStart = selectionStart - 1;
    inputField.selectionEnd = selectionStart - 1;
    event.preventDefault();
  } else if (event.key === 'Delete') {
    inputField.value = inputField.value.substring(0, selectionStart) + 
                       inputField.value.substring(selectionEnd + 1);
    inputField.selectionStart = selectionStart;
    inputField.selectionEnd = selectionStart;
    event.preventDefault();
  }
});

Summary

본 글에서는 커서 삭제 후 입력 상자의 내용을 자동으로 앞으로 이동시키는 JavaScript를 구현하는 두 가지 방법을 소개합니다. 첫 번째 방법은 JavaScript의 Selection API를 사용하여 텍스트 작업을 수행하고, 두 번째 방법은 키보드 이벤트를 시뮬레이션하여 구현합니다. 두 가지 방법 모두 장단점이 있으므로 실제 요구 사항과 브라우저 호환성에 따라 선택하세요.

위 내용은 JS에서 커서를 삭제한 후 입력 상자의 내용을 자동으로 앞으로 이동시키는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!