>  기사  >  웹 프론트엔드  >  JavaScript를 사용하여 TextBox 컨트롤에서 선택한 텍스트를 검색하는 방법은 무엇입니까?

JavaScript를 사용하여 TextBox 컨트롤에서 선택한 텍스트를 검색하는 방법은 무엇입니까?

Susan Sarandon
Susan Sarandon원래의
2024-10-24 22:26:02380검색

How to Retrieve Selected Text from a TextBox Control Using JavaScript?

JavaScript를 사용하여 TextBox 컨트롤에서 선택한 텍스트 가져오기

텍스트 상자 작업 시 선택한 텍스트를 검색해야 할 수도 있습니다. 이 문서의 목표는 Internet Explorer 6에서 발생하는 문제를 해결하여 이 작업에 대한 포괄적인 솔루션을 제공하는 것입니다.

텍스트 상자 내 텍스트 선택은 JavaScript의 내장 속성을 사용하여 수행할 수 있습니다. 표준 호환 브라우저의 경우 SelectionStart 및 SelectionEnd 속성은 선택한 텍스트의 범위를 제공합니다. 다만, 인터넷 익스플로러의 경우 선택 개체를 이용한 해결 방법이 필요합니다.

<code class="javascript">function ShowSelection() {
  var textComponent = document.getElementById('Editor');
  var selectedText;

  if (textComponent.selectionStart !== undefined) { 
    // Standards-compliant version
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos);
  } else if (document.selection !== undefined) {
    // Internet Explorer version
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }

  alert("You selected: " + selectedText);
}</code>

처음에는 인터넷 익스플로러 6에서 위 코드가 제대로 동작하지 못하는 문제가 발생했습니다. 이 문제를 해결하기 위해 선택 개체에 액세스하기 전에 focus() 호출이 추가됩니다. 또한 onkeydown 이벤트에 ShowSelection() 함수를 첨부하면 선택한 텍스트를 감지하는 안정적인 솔루션을 제공합니다.

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

더 자세히 설명하자면 버튼 관련 문제는 Internet Explorer에서 텍스트 선택을 취소하는 고유한 동작 때문에 발생합니다. . 따라서 간단한 입력 버튼을 활용하는 것이 좋습니다. 이 솔루션을 구현하면 텍스트 상자 컨트롤에서 선택한 텍스트를 효과적으로 검색하여 Internet Explorer 6에서 발생하는 문제를 극복할 수 있습니다.

위 내용은 JavaScript를 사용하여 TextBox 컨트롤에서 선택한 텍스트를 검색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.