本文概述如何使用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中文網其他相關文章！
