覆盖浏览器的搜索功能（CTRL + F），但重用其本机搜索字段 [英] Override browser's search feature (CTRL+F), but reuse its native search field

问题描述

我想替换 CTRL + F以在HTML页面上提供自定义搜索功能。这可以很容易地完成：

  window.onkeydown = function（event）{
 if（event.ctrlKey& amp; ;& event.keyCode == 70）{
 event.preventDefault（）; 
 my_own_search（）; 
}} 
  

但我无法使用浏览器的底部本机搜索字段（例如在这里使用Firefox，法语）：

如何执行重复使用浏览器本地Bottam搜索文本框的自定义搜索功能？

如果不可能，建议您如何创建一个自定义文本框（如Chrome中的搜索栏）或底部（如搜索栏中的Firefox），以Bootstrap为例？

---

另一个例子： PDF查看器在Chrome中提供自定义搜索（=不是在HTML页面上进行的常规搜索，而是针对PDF文档的搜索），而是使用浏览器的本机搜索字段：

我想因为这是一个旧的线程，但这里标记的正确答案现在是无效的。过去两天我在两个网站上看到了这一点，我很喜欢它。 Codepen.io for one：

Command / Control + F在第一个窗格中时，您将看到他们的自定义搜索。

如果您检查自己的代码，您可以看到它们具有自定义事件，请使用chrome开发工具（CDT）为 CodeMirror-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:

解决方案

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

这篇关于覆盖浏览器的搜索功能（CTRL + F），但重用其本机搜索字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！