JavaScript를 사용하여 Chrome에서 커서 아래에 단어를 가져오는 방법은 무엇입니까?

JavaScript에서 커서 아래에 단어 가져오기

웹 개발에서는 커서가 현재 어느 단어 위에 있는지 아는 것이 유용할 수 있습니다. . 이 기사에서는 Chrome 브라우저에서 특별히 작동하는 JavaScript 솔루션을 제시합니다.

함수 개요

getWordAtPoint 함수는 요소(elem), x 좌표의 세 가지 매개변수를 사용합니다. (x) 및 y 좌표(y)입니다. Range 개체를 사용하여 HTML 요소의 텍스트 콘텐츠를 반복하고 지정된 좌표에서 커서 아래에 어떤 단어가 있는지 확인합니다.

구현

함수 먼저 입력 요소가 텍스트 노드인지 확인합니다. 그렇다면 요소의 텍스트 내용을 선택하는 Range 개체를 생성합니다. 그런 다음 루프를 사용하여 텍스트의 각 문자를 점진적으로 선택하고 getBoundingClientRect() 메서드를 사용하여 현재 문자의 경계 사각형에 지정된 좌표가 포함되어 있는지 확인합니다. 일치하는 항목이 발견되면 Expand() 메서드를 사용하여 Range 객체가 전체 단어를 포함하도록 확장됩니다. 마지막으로 함수는 단어의 문자열 표현을 반환합니다.

입력 요소가 텍스트 노드가 아닌 경우 함수는 지정된 좌표가 포함된 텍스트 노드를 찾을 때까지 하위 노드를 반복적으로 반복합니다.

사용법

이 기능을 사용하려면 원하는 HTML 요소의 mousemove 이벤트 핸들러에 첨부하면 됩니다. 예:

<code class="javascript">document.addEventListener('mousemove', (e) => {
  const word = getWordAtPoint(e.target, e.x, e.y);
  console.log(word);
});</code>

이 코드는 사용자가 지정된 요소 위로 마우스를 이동할 때마다 커서 아래의 단어를 콘솔에 기록합니다.

위 내용은 JavaScript를 사용하여 Chrome에서 커서 아래에 단어를 가져오는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!