브라우저 Ctrl+F 기능의 JS 구현

이 문서에서는 HTML, CSS 및 JavaScrip을 사용하여 사용자 정의, 강조 표시, 키보드 단축키 및 탐색 컨트롤을 다루는 브라우저에 내장된 Ctrl+F 기능과 유사한 기능을 갖춘 사용자 정의 검색 창을 만드는 방법에 대한 개요를 제공합니다

브라우저의 Ctrl+F 기능에 맞는 검색 입력창을 만들려면 어떻게 해야 하나요?

브라우저의 Ctrl+F 기능에 맞는 검색 입력창을 만들려면 HTML과 JavaScript를 사용할 수 있습니다. 예는 다음과 같습니다.

<code class="html"><input type="text" id="search-input" placeholder="Search..."></code>

<code class="javascript">const searchInput = document.getElementById('search-input');

searchInput.addEventListener('input', () => {
  const searchTerm = searchInput.value;

  // Perform the search and update the results
});</code>

브라우저처럼 검색 결과를 맞춤설정하고 일치 항목을 강조 표시할 수 있나요?

예, CSS와 JavaScript를 사용하여 브라우저처럼 검색 결과를 맞춤 설정하고 일치 항목을 강조 표시할 수 있습니다. 예는 다음과 같습니다.

<code class="css">.search-result {
  background-color: yellow;
}</code>

<code class="javascript">// Highlight the matches in the search results
const searchResults = document.querySelectorAll('.search-result');

searchResults.forEach((result) => {
  const match = result.textContent.match(searchTerm);

  if (match) {
    const highlightedMatch = `<mark>${match[0]}</mark>`;

    result.innerHTML = result.textContent.replace(match[0], highlightedMatch);
  }
});</code>

브라우저의 Ctrl+F 기능에 사용되는 키보드 단축키와 탐색 컨트롤을 어떻게 구현할 수 있나요?

브라우저의 Ctrl+F 기능에 사용되는 키보드 단축키와 탐색 컨트롤을 구현하려면 다음을 사용할 수 있습니다. JavaScript 및 KeyboardEvent 객체. 예를 들면 다음과 같습니다.

<code class="javascript">document.addEventListener('keydown', (event) => {
  if (event.ctrlKey && event.key === 'F') {
    // Open the search input bar
  } else if (event.ctrlKey && event.key === 'G') {
    // Find the next match
  } else if (event.ctrlKey && event.key === 'Backspace') {
    // Find the previous match
  }
});</code>

위 내용은 브라우저 Ctrl+F 기능의 JS 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!