Javascript 如何使浏览器页面搜索（Ctrl-F）在特定div中启动

我们有一个简单的html布局，带有导航div和内容div。在某些情况下，导航面板可以有很多内容

使用默认浏览器页面搜索Ctrl-F时，搜索从nav div开始，在访问内容面板之前可能需要多次“下一步”单击（取决于搜索词）

---

是否有任何方法强制浏览器页面搜索从特定的div开始？

使用CTRL+F时，无法选择页面的特定部分供浏览器搜索

浏览器搜索它加载的整个文档

当然，您可以使用JavaScript来检测是否同时按下CTRL键和F键，然后从文档中删除所有数据，只留下您希望他们搜索的内容。但考虑到你会删除整个网站的大部分内容，用户会认为有些东西坏了，这既不是一个好的解决方案，也不是一个好的解决方案

---

在您的网站上创建自定义搜索字段。

有一种方法可以使用javascript创建选择…
现在，如果您

选择一些文本，然后使用
查找
浏览器工具
搜索
一些内容…

搜索结果必须从该点开始。

（即使结果显示页面中的所有匹配项，第一个结果从用户选择文本的位置开始）

所以，如果我们加入这两个。。我们可以找到您需要的方法…

比如：

$(window).on('keydown', function (event) {
    if ((event.ctrlKey || event.metaKey) && (String.fromCharCode(event.which).toLowerCase() == 'f')) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById('search_from_here'));
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(document.getElementById('search_from_here'));
            window.getSelection().addRange(range);
        }
    }
});

查看此JSFIDLE以获取示例

重要：要使本例（在JSFIDLE中）起作用，重点必须放在“结果iframe”上。
如果用户想要在导航面板上搜索“大量内容”，该怎么办？这是一种浏览器UI行为，您不应该试图更改它。用户可以选择一点文本来指示他们想要从哪里开始搜索自己（如果他们想要的话）。也许您应该考虑在页面中引入自定义搜索机制？web浏览器的“查找”机制将搜索当前活动文档的全部内容。没有方法限制搜索应该发生的区域或元素。如果你需要这种行为，你就需要实施你自己的行为。工作起来很有魅力。非常感谢。