Override browser's search feature (CTRL+F), but reuse its native search field

Question

I would like to override CTRL+F in order to provide a custom search feature on a HTML page. This can easily be done with :

window.onkeydown = function(event) {
    if (event.ctrlKey && event.keyCode == 70) {
        event.preventDefault();          
        my_own_search();
    } }

but then I won't be able to use the browser's bottom native search field (example here with Firefox, French language) :

How to do a custom search feature that reuses the browser's native bottam search textbox ?

If not possible, what do you suggest for creating a custom textbox sticked at the top right (like the Search bar in Chrome) or bottom (like the Search bar in Firefox), with Bootstrap for example ?

---

Another example : the PDF viewer in Chrome provides custom search (=not the regular search on HTML pages, but a search adapted for PDF documents) but with the browser's native search field:

Answer 1

You should NEVER be able to override a browser feature from a website. If you can, it's a major security fault in the browser.

As has been mentioned, plugins can be written for individual browsers, but they must be installed by the user (i.e. they are giving permission for your override). Otherwise you're out of luck

Answer 2

I suppose because this is an old thread, but the correct answer marked here is now invalid. I have seen this on two sites in the past two days, and I kind of love it. Codepen.io for one:

Command/Control+F when in the first pane, and you will see their custom search.

If you examine their code you can see they have custom events for it, do a 'Search All Files' in chrome dev tools (CDT) for CodeMirror-search-field