登录 注册

代码块类型输入区域如何获得焦点?

本贴最后更新于 1490 天前，其中的信息可能已经天翻地覆

以下是我的 css 写法：

.vditor-ir__marker[data-type="code-block-info"] {
  opacity: 0;
}

.vditor-ir__node[data-type="code-block"]:hover
  .vditor-ir__marker[data-type="code-block-info"],
.vditor-ir__node[data-type="code-block"]:focus-within
  .vditor-ir__marker[data-type="code-block-info"] {
  opacity: 1;
}
​

尽管使用了 :focus-within，但是输入的时候如果把鼠标悬停在弹出菜单上时，类型输入区域的透明度还是会变回 0，如下图：

代码块类型输入区域.gif

所以想问问，应该如何获得焦点呢？

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    25376 引用 • 104805 回帖
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    9705 引用 • 44150 回帖 • 90 关注
抚州 位置
500 悬赏
2 关注
9 回帖
4
4
1.4k 39 156 330 61 20 3 773

相关帖子

9 回帖
代码块类型输入区域如何获得焦点?

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • Vanessa • via macOS
    订阅者 付费者 MOD

    只要光标在编辑器中就是 focus 状态，可能需要重置 .vditor-ir__node[data-type="code-block"] span.vditor-ir__marker--info

    2 回复
  • svchord • • 2 评论
    捐赠者 作者

    我把代码改成这样也还是没有效果…

    .vditor-ir__node[data-type="code-block"] span.vditor-ir__marker--info:hover,
.vditor-ir__node[data-type="code-block"]
  span.vditor-ir__marker--info:focus-within {
  opacity: 1;
}
​
    重置 display
    Vanessa •
    @Vanessa 噢这个我已经重置过了，这个问题是我设置的 opacity 导致的，因为我把 opacity 恒定为 1 就不会有这个问题了
    svchord •
  • svchord • • 2 评论
    捐赠者 作者

    我把这段代码加在默认主题下的效果也是如此，这样可能更好理解一些：

    默认主题下代码块类型输入区域 bug.gif

    --expand 的时候不要设置 opacity 为 0
    Vanessa • • 1
    @Vanessa 这应该算是间接办法了（捂脸，不过还是很奇怪为什么不能获得焦点
    svchord •
  • Achuan-2 • • 5 评论
    订阅者 先知

    focus 是不是只针对 input 和 textarea 啊，比如表格的 br 我一直想是点击表格单元格才显示，而不是 hover，然而没法实现。

    应该不是，我查了下:focus 的一些例子，也有直接作用于 div 上的，如：https://www.zhangxinxu.com/wordpress/2018/01/css-focus-within-pseudo-class-selector/ 的最后一个例子
    svchord •
    @zqhjl 那个例子好像有子元素才可以成功
    Achuan-2 •
    @zqhjl 还有，老哥，我发现你的 notion 主题改了代码类型样式之后，代办列表里的代码块类型不能显示了或者说显示在页面最上方
    Achuan-2 •
    @Achuan-2 但我用的:focus-within 就是有子元素的啊…
    svchord •
    @Achuan-2 我试了下，默认主题下待办列表里的代码块就是有 bug 的…你可以发个帖子
    svchord •
  • Achuan-2 •
    订阅者 先知

    V 姐用 js 有加了一个 focus 产生的类名，用这个就好.vditor-ir__node--expand

    .vditor-ir__node--expand[data-type='code-block'] span.vditor-ir__marker--info {
    opacity: 1;
}
​
    1 回复
  • Achuan-2 •
    订阅者 先知

    任务列表里的代码块不能显示的代码类型，加个 block 就可以了

    .vditor-ir__node[data-type='code-block'] {
    position: relative;
    display: block;
}
​
    1 回复
  • Achuan-2 • • 1 评论
    订阅者 先知

    感谢老哥，现在代码块更简洁好看了

    代码样式.gif

    哈哈哈没事没事，共同进步嘛
    svchord •
  • svchord • • 2 评论
    捐赠者 作者

    嗯，我最后就是这么实现的，只是会有个小问题：鼠标点击代码块后移开，这个类型输入区域还是会显示

    这个也不算问题吧，默认就是这样的
    Achuan-2 •
    @Achuan-2 可能我还是强迫症吧，想实现 notion 那种效果，但是确实做不到
    svchord •
  • svchord • • 1 评论
    捐赠者 作者

    诶你在待办列表中加入代码块不会有这个 bug 吗？

    任务列表中的代码块 bug.gif

    顺带抄送 @Vanessa V 姐看看这个 bug

    收到，后面修复
    Vanessa •
请输入回帖内容 ...
svchord
抚州
回帖
78
 帖子
41
 积分
35

近期热议

推荐标签 标签

  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 399 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似，也就是用各类命令预先放入到一个文件中，方便一次性执行的一个程序文件，主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大，比用其他编程程序编辑的程序效率更高，因为它使用了 Linux/Unix 下的命令。

    124 引用 • 74 回帖
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台，它支持多种框架、语言、运行时环境、云平台及应用服务，使开发人员能够在几秒钟内进行应用程序的部署和扩展，无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 180 关注
  • 宕机

    宕机，多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态，也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态，也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 77 关注
  • Docker

    Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的操作系统上。容器完全使用沙箱机制，几乎没有性能开销，可以很容易地在机器和数据中心中运行。

    494 引用 • 930 回帖
  • Flume

    Flume 是一套分布式的、可靠的，可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 654 关注
  • 面试

    面试造航母，上班拧螺丝。多面试，少加班。

    325 引用 • 1395 回帖 • 1 关注
  • Access
    1 引用 • 3 回帖
  • Excel
    31 引用 • 28 回帖
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 55 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发，并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例： https://wide.b3log.org

    30 引用 • 218 回帖 • 639 关注
  • SMTP

    SMTP（Simple Mail Transfer Protocol）即简单邮件传输协议，它是一组用于由源地址到目的地址传送邮件的规则，由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇，它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 635 关注
  • GAE

    Google App Engine（GAE）是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 813 关注
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用（如 Word、Excel 和 PowerPoint）与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起，可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖 • 1 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    345 引用 • 745 回帖
  • Flutter

    Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作，它正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 3 关注
  • LeetCode

    LeetCode（力扣）是一个全球极客挚爱的高质量技术成长平台，想要学习和提升专业能力从这里开始，充足技术干货等你来啃，轻松拿下 Dream Offer！

    209 引用 • 72 回帖
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎，可以结合 MySQL、PostgreSQL 做全文搜索，它可以提供比数据库本身更专业的搜索功能，使得应用程序更容易实现专业化的全文检索。

    1 引用 • 224 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • 微软

    微软是一家美国跨国科技公司，也是世界 PC 软件开发的先导，由比尔·盖茨与保罗·艾伦创办于 1975 年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 1 关注
  • 深度学习

    深度学习（Deep Learning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    54 引用 • 44 回帖
  • Ubuntu

    Ubuntu（友帮拓、优般图、乌班图）是一个以桌面应用为主的 Linux 操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词，意思是“人性”、“我的存在是因为大家的存在”，是非洲传统的一种价值观，类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    127 引用 • 169 回帖
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库，专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 85 关注
  • 小说

    小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    32 引用 • 108 回帖 • 1 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器，在 1999 年被捐献给 ASF（Apache Software Foundation），隶属于 Jakarta 项目，现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范，同时也提供 HTTP 服务，是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 1 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库，该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable：一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样，HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 57 关注
  • OpenCV
    15 引用 • 36 回帖 • 5 关注

最新标签