Quiero usar una búsqueda como Ctrl+F en el trabajo de Virtual Tour. En primer lugar, la dirección de este estudio es 360franke.com
Tengo un solo archivo index.html. Casi todo el trabajo,
<body> <div id="viewer" class="fill_viewport"></div> </body>Se muestra con este div.
Puedo encontrar los elementos del menú (por ejemplo, Konseptler, Katalog) con ctrl+f en el navegador. Pero quiero redirigirlo con un botón de búsqueda, no con ctrl+f. Muchos métodos que he probado no han funcionado. Muchas gracias de antemano por sus sugerencias.
No puede anular la funcionalidad predeterminada CMD + F del navegador; sin embargo, una implementación común de esto es con CMD + K en su lugar (consulte este sitio web ).
Echa un vistazo a esta demostración:
const ul = document.querySelector('ul'); const search = document.querySelector('input'); // Our epic dummy dataseet const items = [ { title: 'foo', }, { title: 'bar foo', }, { title: 'baz', }, { title: 'fizz buzz', }, { title: 'baz foo bar', }, { title: 'baz bar', }, { title: 'buzz foo', }, { title: 'foo buzz', }, ]; // Takes an array and populates the list with // all the elements const populateItems = (arr) => { ul.innerHTML = ''; for (const { title } of arr) { const li = document.createElement('li'); li.textContent = title; ul.appendChild(li); } }; // Display the search bar showSearch = () => (search.style.display = 'block'); // Hide the search bar hideSearch = () => (search.style.display = 'none'); const handleKeyDown = ({ key, metaKey, ctrlKey }) => { // Continue only if they are pressing CMD + K if (!((metaKey || ctrlKey ) && key === 'k')) return; // If search is already shown, hide it if (search.style.display === 'block') return hideSearch(); // Otherwise, show it showSearch(); search.focus(); // Add a listener so that when use clicks out of the // search bar, it will disappear const handleClickOut = ({ target }) => { if (target === search) return; hideSearch(); // Remove the event listener after it's been fired window.removeEventListener('click', handleClickOut); }; window.addEventListener('click', handleClickOut); }; // Filters the elements and repopulates const handleSearch = ({ target }) => { // If empty string, just repopulate with the full list if (!target.value) return populateItems(items); // Else, filter and repopulate with filtered items const filtered = items.filter(({ title }) => title.includes(target.value)); populateItems(filtered); }; search.addEventListener('keyup', handleSearch); window.addEventListener('keydown', handleKeyDown); window.addEventListener('DOMContentLoaded', () => populateItems(items)); input { position: fixed; top: 5px; right: 5px; display: none; } <ul></ul> <input type="search" placeholder="Search for an item..." />Tenga en cuenta que entre Mac y Windows, la clave que la gente está acostumbrada a usar es diferente. En Mac, usamos CMD , mientras que Windows usa CTRL , por lo que cubrimos ambos casos aquí.
Solo tienes que capturar evento y enfocar la barra de búsqueda
Este código redirige ctrl + F, cmd + F y F3 a una entrada
window.addEventListener("keydown", (e) => { if (e.code === 'F3' || ((e.ctrlKey || e.metaKey) && e.code === 'KeyF')) { e.preventDefault(); const search = document.querySelector('#search') search.focus() } }) <input id="search">