JavaScript의 텍스트 상자에서 선택한 텍스트를 캡처하는 방법: 포괄적인 솔루션

JavaScript의 텍스트 상자에서 텍스트 선택을 캡처하는 방법

많은 JavaScript 개발자는 텍스트 상자 컨트롤에서 선택한 텍스트를 검색하려고 할 때 문제에 직면합니다. . 이 문서에서는 포괄적인 분석과 실용적인 솔루션을 통해 이 문제를 다룹니다.

최신 브라우저에서 선택한 텍스트 캡처:

HTML5 선택 API를 지원하는 최신 브라우저의 경우 다음 코드 조각을 사용할 수 있습니다.

<code class="javascript">function ShowSelection() {
  const textArea = document.getElementById('textbox');
  const selection = textArea.selectionStart !== undefined
    ? textArea.value.substring(textArea.selectionStart, textArea.selectionEnd)
    : '';
  alert(`You selected: ${selection}`);
}</code>

Internet Explorer에서 선택한 텍스트 캡처:

Internet Explorer에는 다른 접근 방식이 필요합니다. 이 브라우저에 대한 다음 코드는 다음과 같습니다.

<code class="javascript">if (document.selection !== undefined) {
  textArea.focus();
  const sel = document.selection.createRange();
  const selection = sel.text;
  alert(`You selected: ${selection}`);
}</code>

버튼 클릭 시 선택 유지:

버튼을 클릭할 때 선택 항목이 지워지는 것을 방지하려면 초점을 맞춰야 합니다. 텍스트 상자로 돌아왔습니다. 이는 onkeydown 이벤트를 처리하여 달성할 수 있습니다:

<code class="javascript">document.onkeydown = function (e) { ShowSelection(); };</code>

입력 태그가 있는 버튼:

이 접근 방식은 li 태그를 사용하여 그린 버튼에 대해 작동하지만 입력 태그를 사용하여 그린 버튼에서는 올바르게 작동하지 않습니다. 후자의 경우, 선택을 유지하기 위해 onfocus 및 onblur 이벤트를 사용하는 것과 같은 대체 솔루션이 존재합니다.

제공된 코드를 구현함으로써 개발자는 텍스트 상자 컨트롤에서 선택한 텍스트를 효과적으로 캡처하고 표시할 수 있습니다. 다양한 브라우저에서의 사용자 경험.

위 내용은 JavaScript의 텍스트 상자에서 선택한 텍스트를 캡처하는 방법: 포괄적인 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!