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

admin管理员组

文章数量:1279007

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:

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:

• javascript
• html
• twitter-bootstrap
• user-experience

Share Improve this question Follow edited Sep 23, 2014 at 18:52 Basj asked Sep 23, 2014 at 14:37 BasjBasj 46.3k110110 gold badges452452 silver badges802802 bronze badges 4

• Only with a browser plugin, and even so it's not pletely trivial. – Kroltan Commented Sep 23, 2014 at 14:56
• 1 Please add a ment for downvote ;) Why is this question not interesting ? – Basj Commented Sep 23, 2014 at 18:55
• 3 I would think very hard about what benefit you are adding for the user before overriding default behavior like this. If a website overrode Ctrl + F, they better have an amazing find experience that's light-years beyond the browser's default, or I'm going to immediately leave the site... Just sayin'. – Heretic Monkey Commented Sep 23, 2014 at 21:18
• 1 @MikeMcCaughan The document I'm displaying is not a standard 2D "page" with text and standard layout (with a beginning on top, and an end on bottom). It is totally different. That's why browser's "standard search" is useless. – Basj Commented Sep 23, 2014 at 21:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

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

To override the search field you need to use JavaScript keycodes, using arrays like this:

// 74=j, 75=k, 78=n, 84=t,27=esc, 17=ctrl
var forbiddenCtrlKeys = new Array(74, 75, 78, 84, 123, 91, 92, 44, 165, 18, 122, 78, 27, 17, 16);
// 37=left_arrow, 39=right_arrow
var forbiddenAltKeys = new Array(37, 39, 27, 123, 91, 92, 44, 165, 18, 122, 78, 27, 17, 16);
// 8=backspace, 116=F5
var forbiddenSingleKeys = new Array(8, 116, 123, 91, 92, 44, 165, 18, 122, 78, 27, 17, 16);
// per le textbox 116=F5
var forbiddenTextBoxKeys = new Array(116, 27, 123, 91, 92, 44, 165, 18, 122, 78, 27, 17, 16);

key = window.event.keyCode; // IE

if (window.event.ctrlKey) { // CTRL
  isCtrl = true;
  isAlt = false
}

Swap the keycodes with the ones you want disabled.

A full list of keycodes can be found here.

本文标签：