当前位置： 文江博客 话题详情

我想将ctrl＆＃x2b; f命令与搜索框一起使用

发布于 2025-01-27 14:33:34 字数 414 浏览 3 评论 0 原文

我想在虚拟旅行工作中使用诸如CTRL+F之类的搜索。首先，这项研究的地址为 360franke.com

我有一个index.html文件。几乎所有工作，

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

都与此Div一起显示。

我可以在浏览器中找到带有Ctrl+F的菜单项（例如Konseptler，Katalog）。但是我想用搜索按钮，而不是ctrl+f重定向。我尝试过的许多方法都没有起作用。非常感谢您的建议。

原文

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

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.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

疑心病 2025-02-03 14:33:34

您只需要捕获事件并将搜索栏聚焦

此代码将CTRL + F，CMD + F和F3重定向到输入

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

回复 原文
九厘米的零° 2025-02-03 14:33:34

您不能覆盖默认浏览器 cmd + f 函数;但是，这种常见的实现是 cmd + k 而不是（请参阅）。

看看这个演示：

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

请记住，在Mac和Windows之间，关键人物习惯于使用不同。在Mac上，我们使用 cmd ，而Windows使用 ctrl ，因此我们在此处介绍了两种情况。

You can't override the default browser CMD + F functionality; however, a common 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.

回复 原文
~没有更多了~

关于作者

葵雨

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

qq_aHcEbj

文章 0 评论 0

qq_ikhFfg

文章 0 评论 0

寻找我们的幸福

文章 0 评论 0

把昨日还给我

文章 0 评论 0

wj_zym

文章 0 评论 0

巴黎夜雨

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文