登录 注册

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

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

以下是我的 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

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

  • 思源笔记

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

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

    22351 引用 • 89433 回帖 • 1 关注
  • Q&A

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

    8118 引用 • 37026 回帖 • 160 关注
抚州 位置
500 悬赏
2 关注
9 回帖
4
4
1.2k 39 156 247 56 20 3 684

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Vanessa •
    订阅者 付费者 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

近期热议

推荐标签 标签

  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量，事件及实时分析。

    2 引用 • 72 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 26 关注
  • 域名

    域名（Domain Name），简称域名、网域，是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

    43 引用 • 208 回帖
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 664 关注
  • 脑图

    脑图又叫思维导图，是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具。

    26 引用 • 84 回帖
  • 微软

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

    8 引用 • 44 回帖
  • OpenResty

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

    17 引用 • 40 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现，服务器端用 Erlang 语言编写，支持多种语言客户端，如：Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息，在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 364 关注
  • SOHO

    为成为自由职业者在家办公而努力吧！

    7 引用 • 55 回帖 • 18 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖
  • PHP

    PHP（Hypertext Preprocessor）是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点，主要适用于 Web 开发领域，据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 488 关注
  • App

    App（应用程序，Application 的缩写）一般指手机软件。

    91 引用 • 384 回帖
  • Swift

    Swift 是苹果于 2014 年 WWDC（苹果开发者大会）发布的开发语言，可与 Objective-C 共同运行于 Mac OS 和 iOS 平台，用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 529 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议，它实现了浏览器与服务器之间的全双工通信（full-duplex）。

    48 引用 • 206 回帖 • 334 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 9 关注
  • JSON

    JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘（Capacitive Keyboard）。

    5 引用 • 74 回帖 • 471 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的，开放源码的分布式应用程序协调服务，是 Google 的 Chubby 一个开源的实现，是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件，提供的功能包括：配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 4 关注
  • 微服务

    微服务架构是一种架构模式，它提倡将单一应用划分成一组小的服务。服务之间互相协调，互相配合，为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建，能够被独立的部署。

    96 引用 • 155 回帖 • 1 关注
  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖
  • H2

    H2 是一个开源的嵌入式数据库引擎，采用 Java 语言编写，不受平台的限制，同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式，可以兼容一些主流的数据库，因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 654 关注
  • 电影

    这是一个不能说的秘密。

    120 引用 • 599 回帖
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流，分享无限上传的图片，发布链接和视频，更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 453 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 43 关注
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 536 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 1 关注
  • PWA

    PWA（Progressive Web App）是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术，在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 154 关注

最新标签