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

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

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

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);
}

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

document.onkeydown = function (e) {
  ShowSelection();
};

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