javascript - I want to use ctrl+f command with search box

I want to use a search like Ctrl+F in Virtual Tour work. First of all, the address of this study is 360franke

I have a single index.html file. Almost all work,

    <body>
      <div id="viewer" class="fill_viewport"></div>
    </body>

It is displayed with this div.

I can find the menu items (eg. Konseptler, Katalog) with ctrl+f in the browser. But I want to redirect it with a search button, not ctrl+f. Many methods I have tried have not worked. Thank you very much in advance for your suggestions.

I want to use a search like Ctrl+F in Virtual Tour work. First of all, the address of this study is 360franke.

I have a single index.html file. Almost all work,

    <body>
      <div id="viewer" class="fill_viewport"></div>
    </body>

It is displayed with this div.

Share Improve this question edited May 10, 2022 at 17:26 asked May 10, 2022 at 17:18 Kerem Aladağ 31 silver badge3 bronze badges

1 Please clarify what you are trying to do. I'm not sure what "I want to redirect it with a search button, not ctrl+f" means. – WOUNDEDStevenJones Commented May 10, 2022 at 17:32
Additionally, we cannot tell you what did not work with the methods you tried if you don't tell us what you tried. – Domino Commented May 10, 2022 at 17:32

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

You just have to capture event and focus the search bar

This code redirects ctrl + F, cmd + F and F3 to an input

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

You can't override the default browser CMD + F functionality; however, a mon implementation of this is with CMD + K instead (see this website).

Take a look at this demo:

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..." />

Keep in mind that between Mac and Windows, the key people are used to using is different. On Mac, we use CMD, while Windows uses CTRL, so we've covered both cases here.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745378522a4625114.html

javascript - I want to use ctrl+f command with search box - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - I want to use ctrl+f command with search box - Stack Overflow

2 Answers 2

相关推荐