登录 注册

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

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

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

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

  • 思源笔记

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

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

    23020 引用 • 92609 回帖
  • Q&A

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

    8449 引用 • 38493 回帖 • 155 关注
抚州 位置
500 悬赏
2 关注
9 回帖
4
4
1.2k 39 156 264 57 20 3 687

相关帖子

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

近期热议

推荐标签 标签

  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • 百度

    百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 164 关注
  • C

    C 语言是一门通用计算机编程语言，应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖 • 1 关注
  • Shell

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

    123 引用 • 74 回帖 • 2 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • 职场

    找到自己的位置，萌新烦恼少。

    127 引用 • 1706 回帖
  • Maven

    Maven 是基于项目对象模型（POM）、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 282 关注
  • Electron

    Electron 基于 Chromium 和 Node.js，让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目，兼容 Mac、Windows 和 Linux，它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖
  • Flutter

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

    39 引用 • 92 回帖 • 7 关注
  • MongoDB

    MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是一个基于分布式文件存储的数据库，由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似 JSON 的 BSON 格式，因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 3 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    117 引用 • 99 回帖 • 209 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 316 关注
  • Facebook

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

    4 引用 • 15 回帖 • 439 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug（漏洞）。

    76 引用 • 1737 回帖 • 2 关注
  • Chrome

    Chrome 又称 Google 浏览器，是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写，包括 WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

    62 引用 • 289 回帖
  • Q&A

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

    8449 引用 • 38493 回帖 • 155 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖 • 4 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 1 关注
  • LaTeX

    LaTeX（音译“拉泰赫”）是一种基于 ΤΕΧ 的排版系统，由美国计算机学家莱斯利·兰伯特（Leslie Lamport）在 20 世纪 80 年代初期开发，利用这种格式，即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能，能在几天，甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式，这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 49 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具，它遵循 OpenAPI Specification（这是一种通用的、和编程语言无关的 API 描述规范）。Swagger 贯穿整个 API 生命周期，如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 5 关注
  • 面试

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

    325 引用 • 1395 回帖
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 364 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    156 引用 • 3792 回帖
  • 域名

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

    43 引用 • 208 回帖
  • IBM

    IBM（国际商业机器公司）或万国商业机器公司，简称 IBM（International Business Machines Corporation），总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国，是全球最大的信息技术和业务解决方案公司，拥有全球雇员 30 多万人，业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 139 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言，可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克（Rob Pike）说：我们之所以开发 Go，是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    497 引用 • 1388 回帖 • 278 关注

最新标签