V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Ya
V2EX  ›  问与答

前端有办法修改 Ctrl + F 背景颜色吗?

  •  
  •   Ya · 2018-09-11 03:39:58 +08:00 · 2166 次点击
    这是一个创建于 2284 天前的主题,其中的信息可能已经有所发展或是发生改变。
    10 条回复    2018-09-11 14:30:22 +08:00
    geelaw
        1
    geelaw  
       2018-09-11 03:44:27 +08:00
    没有,这是 user agent 自行决定的。

    Edge 的做法是:若用户处于高对比度模式,则采用高对比度主题的颜色方案,否则采用 黑色字+黄色背景(即使页面背景已经是黄色,即使文字色已经是黑色)。
    casparchen
        2
    casparchen  
       2018-09-11 05:32:01 +08:00   ❤️ 1
    非前端,但是简单搜索了一下,貌似可以设置 keypress,监听 Ctrl + F, 然后自己实现一个搜索功能并替换背景颜色吧?
    per
        3
    per  
       2018-09-11 08:29:40 +08:00 via iPhone
    2 楼的想法还算是靠谱的,接触一下事件用自己的搜索框
    per
        4
    per  
       2018-09-11 08:29:46 +08:00 via iPhone
    @per 劫持
    bojackhorseman
        5
    bojackhorseman  
       2018-09-11 09:26:29 +08:00
    看来是 PM 提出了奇怪的需求
    geelaw
        6
    geelaw  
       2018-09-11 09:53:42 +08:00
    @casparchen #2 这是不可能的。我写了一个例子 http://codepad.org/8fMDMr4Q

    无论是 Chrome 还是 Edge 都无法用这段代码正确代替浏览器的 Ctrl+F,如下现象:

    1. 虽然 JS 能够发现 Ctrl+F,但是浏览器搜索框仍然会弹出。
    2. 这段代码并不能正确检查 Ctrl/Alt/Shift/Windows 的状态。如果你按住其中一个键并用鼠标或者其他方式取消 window 的焦点,则代码将以为那个键仍然按下。

    例如当你按 Ctrl+F 时,焦点转移到浏览器的搜索框,松开 Ctrl、关闭搜索框之后,再次按 F,代码会以为你按了 Ctrl+F。

    此外,即使你通过截获 Ctrl+F 替换了浏览器的搜索框,你也无法保证:

    1. 这个浏览器用 Ctrl+F 而不是别的热键激活搜索框(提示:Edge 可以用“查找下一个”也就是 F3 激活搜索框)
    2. 用户真的会用 Ctrl+F 激活搜索框,而不是通过其他方式(提示:Edge 可以用 … | Find on page 激活搜索框)

    答案:不要尝试干扰前端能够做的之外的事情。
    RingoTC
        7
    RingoTC  
       2018-09-11 11:37:27 +08:00
    不知道是在什么情况下提出的这个需求。
    如果是需要为各网站提供一个跨浏览器的通用的搜索功能扩展,可以通过制作浏览器插件的方式去实现这个效果。
    通过浏览器对插件开放的 API 可以实现。( example:tampermonkey 的代码编辑页面)
    如果是要求使用通用的浏览器接口,应该是不能做到这样的效果。
    hearfish
        8
    hearfish  
       2018-09-11 14:08:03 +08:00
    @geelaw Google Docs 了解一下
    geelaw
        9
    geelaw  
       2018-09-11 14:25:36 +08:00 via iPhone
    @hearfish #8 aha,似乎是用 preventDefault。

    然而这样做仍然不能阻止用户用浏览器的其他方式打开搜索框,也不能关闭已经打开的搜索框,也不能改变搜索框搜索结果的颜色。

    此外 Ctrl 的状态仍然是不可完整追踪的。

    截获 Ctrl+F 只解决了一个非常有限的场景,而且这样做会让用户产生更多的困惑,所以不要这样做。
    geelaw
        10
    geelaw  
       2018-09-11 14:30:22 +08:00 via iPhone
    @hearfish #8
    @geelaw #9 原来用事件参数即可检查同步 Ctrl 状态……那么截取 Ctrl+F 可行。不过其他限制依然 apply。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2700 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 14:18 · PVG 22:18 · LAX 06:18 · JFK 09:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.