Kill default CTRL-F search bar in Firefox/Internet Explorer

Question

I am currently designing a web page which provides customized search functionality. Since that might interfere with the default search bar provided by browsers on CTRL-F, we are disabling the event so that the default search bar does not pop up, ours show up instead.

Problem is that, in Firefox and Internet Explorer, unlike Chrome or Safari or Opera, the search bar is sharable among all tabs. So if I am in some other tab, do a CTRL-F to pop up the default search bar, and now jump to this page, the search bar is still there, which defeats our purpose entirely.

I know it sounds impossible, but still, is there any way to kill the default search bar, that is, hide it completely through JavaScript? Then we might do it when we detect the user is tabbing into our page.

And if it is not possible, then is there any way I can disable the default search for a particular element, say a contenteditable div? So that, while the CTRL-F iterates over the page for the word, highlighting every instance with each press of ENTER, all words in that element are completely ignored?

Answer 1

Sandboxed scripting

You can't control behavior or content of other tabs from a page through JavaScript so this is not possible.

Basically: the only way to achieve this is to fork the source code and make your own version of the browser where you provide your own functionality for the search bar. For IE you can make a wrapper in for example .Net for the Web control and distribute that but here you won't have control on IE version.

This would be a bit extreme IMO but in vanilla versions you can't get around this and understandably so as that would invite a whole bunch of security issues.

Extensions can seem as an alternative approach but they are also subject to security and will be limited in this regard so you won't get further than the following -

Limited browser behavior control

You can override the ctrl + f but this will only work on the tab the script is run from (and I would strongly discourage doing this without user's approval as this would change default browser behavior).

An example to do this:

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;
    }
}

Online demo here

Update: For Mac command key it is already answered here:
How does one capture a Mac's command key via JavaScript?.

Answer 2

It looks like you're already listening for Ctrl+F keypresses and suppressing the default behavior. This is as far as you can go.

In other words, the answer to your question is quite simply NO.

The find-in-page search bar is part of the browser chrome; you do not have any way of accessing it through the DOM or otherwise. Browsers do not provide any kind of API that allows a page to control the find-in-page functionality in any way. You cannot close a find bar that is already open. You cannot cause it to be opened. You cannot read or control what is in the search input box.

You may be able to write an extension that controls the find-in-page functionality in some way, but obviously you'd have to convince users to install it and you'd need one for each browser you're targeting.

Quite frankly, any time I see someone asking to disable or interfere with default browser behavior, it is usually a misguided, bad idea. You might think your search functionality is super awesome (after all, you wrote it), but you might be limiting your users in some unexpected way. (I can't say for sure without seeing your exact use case, but this is a good general rule.)

If you're trying to defeat standard browser functionality, you're probably doing it wrong.

Answer 3

PDF.js from Mozilla does this exact thing. http://mozilla.github.io/pdf.js/

In the situation where you are building an integrated web app it's super handy to intercept some of the more common keyboard shortcuts. But for a simple web page it's best to let the browser do it's native business.

Here is the code that will intercept the browser shortcuts. I extracted it from the viewer code for PDF.js. It's also the code for the native FF pdf viewer.

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

Answer 4

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.

Answer 5

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.