希望可以点击块引自动聚焦

下午就要期末考试了,我已经准备好了复习题和答案,如下图:

我是通过块引脚注插件来引用答案的

image.png

每次我想快速滑动答案的时候,老是容易划到下一个答案,希望可以像悬浮窗口那样,点击的时候自动聚焦这个答案

image.png

为什么不选择悬浮窗口呢?

因为

  1. 窗口太小了,每次都要调整
  2. 悬浮需要消耗时间,希望不能快速查看某一个答案

故有没有大佬可以写一个 js 代码片段,点击引用自动聚焦,以排除其他块内容的影响

  • 思源笔记

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

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

    26273 引用 • 109216 回帖
  • Q&A

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

    10104 引用 • 45882 回帖 • 64 关注
1 操作
CongSec 在 2025-05-06 23:03:51 更新了该帖

相关帖子

被采纳的回答
  • 超级块和普通情况不同,它无法在光标处于文本区域时按 alt+ 右方向键触发聚焦,必须点击超级图标才行。所以,这里使用了 mouseover 模拟出超级块图标。
    又因为这个聚焦产生的焦点无法用 requestAnimationFrame 监听,所以这里先用 while 和 sleep 替代。

    修改后的代码如下(兼容超级块和普通块):

    setTimeout(()=>{ // 兼容超级和普通块 openAny.setKeymap('mouseleft', async (event, {sleep}) => { if(!event.target.closest('[data-type~="block-ref"]')) return; let el; const start = Date.now(); while(!el){ if (Date.now() - start > 5000) {console.warn('获取聚焦块元素失败');break;} el = document.querySelector('[data-node-id].protyle-wysiwyg--hl') await sleep(40); } if(el.closest('.sb')){ // 超级块 openAny.press('mouseover', el.firstElementChild.querySelector('[contenteditable="true"]')); const superBtn = await whenElementExist(()=>document.querySelector('use[*|href="#iconSuper"]')?.closest('button')); openAny.click(superBtn).click('#commonMenu [data-id="enter"]'); } else { // 普通块 openAny.press('alt+arrowright', el); } }); }, 2000);

    说明:超级块不用触发快捷键,普通块需要触发快捷键。

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • wilsons 2

    你查看答案是按 alt+ 点击 分屏查看吗?

    如果是的话 openAny 可以实现,代码如下:

    openAny.setKeymap('alt+mouseleft', async (event, {whenElementExist}) => { const el = await whenElementExist('[data-node-id].protyle-wysiwyg--hl'); openAny.press('alt+arrowright', el); });

    须知,凡是手动能操作的,大多数情况 openAny 也可以。

    r128.gif

    补充:

    openAny 代码片段下载地址

    [js] 连续点击 openAny,小代码,大作用,让一切触手可达

    1 回复
    1 操作
    wilsons 在 2025-05-06 14:31:00 更新了该回帖
  • CongSec

    看起来效果不错,但是我无法实现,

    我尝试了如下方法

    1. 将你回复的这段代码单独或者是这段代码和 openany 一起粘贴到不同的 js 片段中,发现并没有效果
      1. image.png
    2. 然后尝试将你的代码嵌入 openany 的代码里面,发现还是没有效果
      1. image.png

    最后,我不知道手机上的效果如何,希望手机上点击块引可以直接聚焦,不用分屏,电脑也不用分屏查看,只需要点击块引聚焦即可,感谢 ❤️

    2 回复
  • 你截图里没打开代码片段的开关

  • wilsons 1
    1. 正如 J 佬所说,你代码片段没开启。

    2. 不要放到 openAny.js 里面,会报错的。

    3. 如果不需要分屏,可以用下面的代码,支持手机和 pc。

      setTimeout(()=>{ openAny.setKeymap('mouseleft', async (event, {whenElementExist}) => { if(!event.target.closest('[data-type="block-ref"]')) return; const el = await whenElementExist('[data-node-id].protyle-wysiwyg--hl'); openAny.press('alt+arrowright', el); }); }, 2000);
    4. 目前仅支持引用,不支持链接等,如果想支持链接,可以改下 这里的限制即可
      if(!event.target.matches('[data-type="block-ref"]')) return;
      比如,下面的代码同时支持引用和链接

      if(!event.target.closest('[data-type="block-ref"],[data-type="a"]')) return;

    PixPin20250506173934.gif

    2 回复
  • CongSec

    没有,我是打开过的,但我新开了一个空间,将你的两段代码导入,发现可行,但是为什么在我原来的空间不行了?然后我想是 css,js 和插件的原因,结果我全部关闭了,还是不行,然后我觉得应该是设置的原因,然后将旧空间的设置导入到新空间,发现新空间不行了,你这两段代码运行需要用什么快捷键或者是开启某些设置之类的?

    2 回复
  • 依赖聚焦快捷键:Alt + 右方向键

  • CongSec

    虽然可以跳转块引用的时候实现聚焦,但好像对超级块不受影响,无法聚焦,以下是我的测试文档(块引脚注插件制作的块引用):密码学复习.sy1.zip

    1 回复
  • wilsons 1 评论

    是的,正如 J 佬所说,需要默认快捷键是 alt + ->。

    你检查下聚焦快捷键是否与改过或与其他快捷键有冲突,如果是,可以把 openAny.press('alt+arrowright', el);改成你自己的快捷键即可。

    如果你改后不行,我在改成其他方式调用聚焦,不过快捷键最方便了。

    不是,我是说可以实现聚焦,但超级块无法实现聚焦
    CongSec
  • wilsons 4 评论

    超级块和普通情况不同,它无法在光标处于文本区域时按 alt+ 右方向键触发聚焦,必须点击超级图标才行。所以,这里使用了 mouseover 模拟出超级块图标。
    又因为这个聚焦产生的焦点无法用 requestAnimationFrame 监听,所以这里先用 while 和 sleep 替代。

    修改后的代码如下(兼容超级块和普通块):

    setTimeout(()=>{ // 兼容超级和普通块 openAny.setKeymap('mouseleft', async (event, {sleep}) => { if(!event.target.closest('[data-type~="block-ref"]')) return; let el; const start = Date.now(); while(!el){ if (Date.now() - start > 5000) {console.warn('获取聚焦块元素失败');break;} el = document.querySelector('[data-node-id].protyle-wysiwyg--hl') await sleep(40); } if(el.closest('.sb')){ // 超级块 openAny.press('mouseover', el.firstElementChild.querySelector('[contenteditable="true"]')); const superBtn = await whenElementExist(()=>document.querySelector('use[*|href="#iconSuper"]')?.closest('button')); openAny.click(superBtn).click('#commonMenu [data-id="enter"]'); } else { // 普通块 openAny.press('alt+arrowright', el); } }); }, 2000);

    说明:超级块不用触发快捷键,普通块需要触发快捷键。

    3 操作
    wilsons 在 2025-05-06 23:48:46 更新了该回帖
    wilsons 在 2025-05-06 23:47:16 更新了该回帖
    wilsons 在 2025-05-06 23:04:50 更新了该回帖
    这代码在新空间也不行呀
    CongSec
    @CongSec 这个是针对超级块特制,要获取超级块标志的,普通块没有超级块标志肯定不行。你要说需要兼容,我后面看看能否实现,或者用两个代码。 【已支持超级和普通块】
    wilsons 1
    @wilsons okok,感谢
    CongSec
    @CongSec 上面代码已更新,支持超级块和普通块了。
    wilsons
请输入回帖内容 ...
CongSec
新手可以看我发的求助帖以及汇总帖子,很有帮助的!_! 网安笔记分享:http://congsec.xyz 北京

推荐标签 标签

  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖
  • Anytype
    3 引用 • 31 回帖 • 28 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    229 引用 • 476 回帖
  • CloudFoundry

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

    4 引用 • 16 回帖 • 196 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    93 引用 • 122 回帖 • 616 关注
  • Sillot

    Insights(注意当前设置 master 为默认分支)

    汐洛彖夲肜矩阵(Sillot T☳Converbenk Matrix),致力于服务智慧新彖乄,具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架(Sillot-Gibbet)基于自思源笔记(siyuan-note),前身是思源笔记汐洛版(更早是思源笔记汐洛分支),是智慧新录乄终端(多端融合,移动端优先)。

    主仓库地址:Hi-Windom/Sillot

    文档地址:sillot.db.sc.cn

    注意事项:

    1. ⚠️ 汐洛仍在早期开发阶段,尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计,使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记,开发者尽最大努力与思源笔记保持兼容,但无法实现 100% 兼容
    29 引用 • 25 回帖 • 132 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    291 引用 • 4495 回帖 • 663 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 534 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 62 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 680 关注
  • FlowUs

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

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

    1 引用 • 2 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 85 关注
  • 小说

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

    32 引用 • 108 回帖
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 651 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    59 引用 • 22 回帖 • 7 关注
  • WebClipper

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

    3 引用 • 9 回帖 • 1 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    108 引用 • 153 回帖 • 2 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    211 引用 • 358 回帖
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 3 关注
  • Thymeleaf

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

    11 引用 • 19 回帖 • 392 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    89 引用 • 1251 回帖 • 394 关注
  • CongSec

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

    1 引用 • 1 回帖 • 37 关注
  • GAE

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

    14 引用 • 42 回帖 • 824 关注
  • OnlyOffice
    4 引用 • 18 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    46 引用 • 114 回帖 • 170 关注