ブラウザ Ctrl+F 機能の JS 実装-jsチュートリアル-php.cn

ブラウザ Ctrl+F 機能の JS 実装

DDD

リリース： 2024-08-13 15:24:19

オリジナル

1039 人が閲覧しました

この記事では、HTML、CSS、JavaScrip を使用した、ブラウザーの組み込み Ctrl+F 機能と同様の機能を備えたカスタム検索バーの作成の概要を説明し、カスタマイズ、強調表示、キーボードショートカット、ナビゲーションコントロールについて説明します

ブラウザ Ctrl+F 機能の JS 実装

ブラウザの 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 中国語 Web サイトの他の関連記事を参照してください。