如何使浏览器页面搜索(Ctrl-F)开始在特定的div

Question

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

当您使用默认的浏览器页面搜索时，Ctrl-F，搜索从navdiv开始，可能需要在访问内容面板之前单击几次"下一步"(取决于搜索词)。

是否有任何方法强制浏览器页面搜索开始在一个特定的div?

Answer 1

有一种使用javascript创建选区的方法…
现在，如果你在 select 一些文本然后在 search 一些使用 find 浏览器工具… search result 必须从该点开始。
^{(即使结果显示页面中的所有匹配项，第一个结果也从用户有文本选择的地方开始)}

所以，如果我们把这两个。我们可以找到你所需要的方法……
比如:

$(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);
        }
    }
});

查看这个jsFiddle示例http://jsfiddle.net/gmolop/tdo7p1o5/
<一口>重要!:焦点必须放在"result iframe"上，以使本例(在jsfiddle中)

Answer 2

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

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

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

在你的网站上创建一个自定义搜索字段