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

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

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

image.png

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

image.png

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

因为

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

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

  • 思源笔记

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

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

    26605 引用 • 110769 回帖 • 1 关注
  • Q&A

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

    10258 引用 • 46623 回帖 • 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
新手可以看我发的求助帖以及汇总帖子,很有帮助的!_! 网安笔记分享:https://congsec.cn 北京

推荐标签 标签

  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖 • 3 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    37 引用 • 158 回帖
  • SOHO

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

    7 引用 • 55 回帖
  • 反馈

    Communication channel for makers and users.

    120 引用 • 906 回帖 • 280 关注
  • 电影

    这是一个不能说的秘密。

    123 引用 • 608 回帖 • 1 关注
  • gRpc
    11 引用 • 9 回帖 • 103 关注
  • Chrome

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

    63 引用 • 289 回帖
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    554 引用 • 675 回帖
  • 一些有用的避坑指南。

    69 引用 • 93 回帖 • 1 关注
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖 • 2 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖
  • 小说

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

    32 引用 • 108 回帖
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 112 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    268 引用 • 666 回帖
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 184 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    29 引用 • 202 回帖 • 33 关注
  • WebSocket

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

    48 引用 • 206 回帖 • 280 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 831 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖 • 1 关注
  • CloudFoundry

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

    4 引用 • 16 回帖 • 201 关注
  • Shell

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

    125 引用 • 74 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    35 引用 • 468 回帖 • 761 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    20 引用 • 37 回帖 • 568 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 234 回帖 • 5 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1445 引用 • 10083 回帖 • 506 关注
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 262 关注