5

我目前正在设计一个提供自定义搜索功能的网页。CTRL由于这可能会干扰浏览器在-上提供的默认搜索栏F，因此我们将禁用该事件，以便不会弹出默认搜索栏，而是显示我们的。

问题是，在 Firefox 和 Internet Explorer 中，与 Chrome、Safari 或 Opera 不同的是，搜索栏可以在所有选项卡之间共享。因此，如果我在其他选项卡中，请执行CTRL-F以弹出默认搜索栏，现在跳转到此页面，搜索栏仍然存在，这完全违背了我们的目的。

我知道这听起来不可能，但是，有没有办法杀死默认搜索栏，即通过 JavaScript 完全隐藏它？然后，当我们检测到用户正在进入我们的页面时，我们可能会这样做。

如果不可能，那么有什么方法可以禁用对特定元素的默认搜索，比如 a contenteditable div？这样，虽然CTRL-F遍历该单词的页面，每次按下 时都会突出显示每个实例，ENTER但该元素中的所有单词都会被完全忽略？

4

5 回答 5

7

沙盒脚本

您无法通过 JavaScript 控制页面中其他选项卡的行为或内容，因此这是不可能的。

基本上：实现这一点的唯一方法是分叉源代码并制作您自己的浏览器版本，您可以在其中为搜索栏提供自己的功能。对于 IE，您可以在例如 .Net 中为 Web 控件制作一个包装器并分发它，但在这里您将无法控制 IE 版本。

这将是一个有点极端的 IMO，但在香草版本中，你无法解决这个问题并且可以理解，因为这会引发一大堆安全问题。

扩展似乎是一种替代方法，但它们也受到安全性的限制，并且在这方面受到限制，因此您不会比以下更进一步 -

有限的浏览器行为控制

您可以覆盖ctrl+f但这仅适用于运行脚本的选项卡（我强烈反对在未经用户批准的情况下这样做，因为这会改变默认浏览器行为）。

执行此操作的示例：

document.onkeydown = function(e) {

    /// for IE
    e = e || event;
    var keyCode = (window.event) ? e.which : e.keyCode;

    /// check ctrl + f key
    if (e.ctrlKey === true && keyCode === 70) {
        e.preventDefault();
        
        console.log('Ctrl + f was hit...');
        
        return false;
    }
}

在线演示在这里

更新：对于 Maccommand键，这里已经回答了：
如何通过 JavaScript 捕获 Mac 的命令键？.

于 2013-10-10T03:17:32.367 回答
5

看起来您已经在监听Ctrl+F按键并抑制默认行为。这是你能做到的。

换句话说，您的问题的答案很简单NO。

页面内查找搜索栏是浏览器 chrome 的一部分；您无法通过 DOM 或其他方式访问它。浏览器不提供任何允许页面以任何方式控制在页面中查找功能的 API。您无法关闭已打开的查找栏。你不能让它被打开。您无法阅读或控制搜索输入框中的内容。

您也许可以编写一个以某种方式控制在页面中查找功能的扩展程序，但显然您必须说服用户安装它，并且您需要为每个目标浏览器安装一个。

坦率地说，每当我看到有人要求禁用或干扰默认浏览器行为时，这通常是一个被误导的坏主意。您可能认为您的搜索功能非常棒（毕竟是您编写的），但您可能会以某种意想不到的方式限制您的用户。（如果没有看到您的确切用例，我不能肯定地说，但这是一个很好的一般规则。）

如果您试图破坏标准浏览器功能，那么您可能做错了。

于 2013-10-10T03:31:28.383 回答
2

来自 Mozilla 的 PDF.js 正是这样做的。http://mozilla.github.io/pdf.js/

在构建集成 Web 应用程序的情况下，拦截一些更常见的键盘快捷键非常方便。但是对于一个简单的网页，最好让浏览器来做它的本机业务。

这是拦截浏览器快捷方式的代码。我从 PDF.js 的查看器代码中提取了它。它也是本机 FF pdf 查看器的代码。

window.addEventListener("keydown", function keydown(evt){

    var handled = false;
    var cmd = (evt.ctrlKey ? 1 : 0)  |
              (evt.altKey ? 2 : 0)   |
              (evt.shiftKey ? 4 : 0) |
              (evt.metaKey ? 8 : 0);
    /*
    First, handle the key bindings that are independent whether an input
    control is selected or not.
    */
    if(cmd === 1 || cmd === 8 || cmd === 5 || cmd === 12){
        // either CTRL or META key with optional SHIFT.
        switch(evt.keyCode){
            case 70: //f
                //open custom search/find text
                handled = true;
                break;
            case 71: //g
                //find next
                handled = true;
                break;
            case 61:  // FF/Mac "="
            case 107: // FF "+" and "="
            case 187: // Chrome "+"
            case 171: // FF with German keyboard
                //zoom in
                handled = true;
                break;
            case 173: // FF/Mac "-"
            case 109: // FF "-"
            case 189: // Chrome "-"
                //zoom out
                handled = true;
                break;
            case 48: // "0"
            case 96: // "0" on Numpad of Swedish keyboard
                //set scale
                handled = true;
                break;
        }
    }

    // CTRL or META without shift
    if(cmd === 1 || cmd === 8){
        switch(evt.keyCode){
            case 83: //s
                //download/save file
                handled = true;
                break;
        }
    }

    // CTRL+ALT or Option+Command
    if(cmd === 3 || cmd === 10){
        switch(evt.keyCode){
            case 80: //p
                //presentaion mode
                handled = true;
                break;
            case 71: //g
                //focus page number dialoge
                handled = true;
                break;
        }
    }

    if(handled){     
        evt.preventDefault();
        return;
    }
});
于 2014-06-30T18:25:28.460 回答
1

Altering the default browser UI is simply wrong, you should design your web page search logic to peacefully coexist with the browser search UI.

If you really like to provide a custom browser experience from which you believe your users will benefit, you should create a custom browser application, tailored to your content, and give users an option to use it.

In turn, this will give you freedom to create custom navigation and search UI. That's what many kiosk-like browser solutions do. There are a lot of options to start with: IE WebBrowser Control, WebKit, Chrome Embedding Toolkit, etc.

于 2013-10-15T23:10:49.790 回答
0

You can make use of JavaScript Hotkeys. Of course there is no built in facility for the same, but it can be achieved like this-

var isCtrl = false;         //In the Global scope
document.onkeyup = function(evn){
    if(evn.which == 17){isCtrl = true;}     //.which stores an ASCII related code of the key pressed; 17 stands for the Ctrl key
}
document.onkeydown = function(evn){
    if(evn.which == 17){isCtrl = true;}
    if((evn.which == 70) && (isCtrl = true)){    //70 stands for 'F' or 'f'
        //Popup the search bar
        //isCtrl = false; if you are using prompt() box
        return false;
    }
}

I have tested this in Google Chrome - it really works!

Edit: I have now found that although it is possible to override the default hotkeys for Ctrl+1, Ctrl+2... etc., but it is impossible to do so for key combinations like Ctrl+O(open page) Ctrl+S(Save page), etc.

于 2013-10-14T16:09:54.340 回答