JavaScript의 텍스트 상자에서 선택한 텍스트를 검색하는 방법은 무엇입니까?

JavaScript의 텍스트 상자에서 선택한 텍스트 검색

웹 양식으로 작업할 때 사용자가 선택한 텍스트를 텍스트 상자. 이 작업은 JavaScript와 다음 단계를 사용하여 수행할 수 있습니다.

1단계: 브라우저 간 호환성 구현

다양한 브라우저 간의 호환성을 보장하려면 다음 코드를 사용하여 결정합니다. 선택한 텍스트를 얻기 위해 선호되는 방법:

<code class="js">function getSelection(textComponent) {
  if (textComponent.selectionStart !== undefined) {
    // Standards-compliant version
    return textComponent.value.substring(textComponent.selectionStart, textComponent.selectionEnd);
  } else if (document.selection !== undefined) {
    // Internet Explorer version
    textComponent.focus();
    var sel = document.selection.createRange();
    return sel.text;
  }
}</code>

2단계: 이벤트에서 선택한 텍스트 검색

사용자가 버튼을 클릭할 때 선택한 텍스트를 검색하거나 다른 UI 요소인 경우 해당 요소에 이벤트 리스너를 연결합니다.

<code class="js">document.getElementById("button").addEventListener("click", function() {
  var selectedText = getSelection(document.getElementById("textbox"));
  alert(selectedText);
});</code>

3단계: Internet Explorer 문제 처리

Internet Explorer 6에서는 텍스트를 올바르게 선택했습니다. 다음 코드를 사용하세요.

<code class="js">document.onkeydown = function (e) {
  getSelection(document.getElementById("textbox"));
};</code>

예:

다음 예는 실제 기능을 보여줍니다.

<code class="html"><input id="textbox" type="text" value="Lorem ipsum dolor sit amet">
<button id="button">Get Selected Text</button>

<script>
  document.getElementById("button").addEventListener("click", function() {
    var selectedText = getSelection(document.getElementById("textbox"));
    alert(selectedText);
  });
</script></code>

다음 단계를 따르세요. 을 사용하면 JavaScript의 텍스트 상자에서 선택한 텍스트를 효과적으로 검색하여 브라우저 간 호환성을 보장하고 Internet Explorer 문제를 해결할 수 있습니다.

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