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

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

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

image.png

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

image.png

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

因为

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

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

  • 思源笔记

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

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

    26295 引用 • 109304 回帖
  • Q&A

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

    10112 引用 • 45923 回帖 • 63 关注
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 北京

推荐标签 标签

  • InfluxDB

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

    2 引用 • 104 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    7 引用 • 69 回帖 • 8 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    300 引用 • 768 回帖
  • RYMCU

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

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

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 561 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    42 引用 • 130 回帖 • 253 关注
  • Latke

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

    71 引用 • 535 回帖 • 828 关注
  • Solo

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

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

    1444 引用 • 10083 回帖 • 508 关注
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖 • 1 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 2 关注
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 610 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    22 引用 • 148 回帖 • 8 关注
  • 酷鸟浏览器

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

    3 引用 • 59 回帖 • 50 关注
  • IBM

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

    17 引用 • 53 回帖 • 143 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    694 引用 • 537 回帖
  • TGIF

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

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

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

    12 引用 • 59 回帖
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 650 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • 周末

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

    14 引用 • 297 回帖
  • Facebook

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

    4 引用 • 15 回帖 • 443 关注
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖 • 2 关注
  • Flume

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

    9 引用 • 6 回帖 • 662 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    440 引用 • 1238 回帖 • 595 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    284 引用 • 248 回帖
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 410 关注