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

查看:150
本文介绍了覆盖浏览器的搜索功能(CTRL + F),但重用其本机搜索字段的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想替换 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆