Pelaksanaan JS fungsi Ctrl+F pelayar

Artikel ini memberikan gambaran keseluruhan membuat bar carian tersuai dengan fungsi yang serupa dengan ciri Ctrl+F terbina dalam penyemak imbas, meliputi penyesuaian, penyerlahan, pintasan papan kekunci dan kawalan navigasi, menggunakan HTML, CSS dan JavaScrip

Bagaimana saya boleh mencipta bar input carian yang sepadan dengan fungsi Ctrl+F penyemak imbas?

Untuk mencipta bar input carian yang sepadan dengan fungsi Ctrl+F penyemak imbas, anda boleh menggunakan HTML dan JavaScript. Berikut ialah contoh:

<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>

Bolehkah saya menyesuaikan hasil carian dan menyerlahkan padanan seperti yang dilakukan oleh penyemak imbas?

Ya, anda boleh menyesuaikan hasil carian dan menyerlahkan padanan seperti yang dilakukan oleh penyemak imbas dengan menggunakan CSS dan JavaScript. Berikut ialah contoh:

<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>

Bagaimana saya boleh melaksanakan pintasan papan kekunci dan kawalan navigasi yang digunakan dalam ciri Ctrl+F penyemak imbas?

Untuk melaksanakan pintasan papan kekunci dan kawalan navigasi yang digunakan dalam ciri Ctrl+F penyemak imbas, anda boleh menggunakan JavaScript dan objek KeyboardEvent. Ini contohnya:

<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>

Atas ialah kandungan terperinci Pelaksanaan JS fungsi Ctrl+F pelayar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!