[js] 搜索时自动填充选取内容

写在前面

插件

在这个插件的基础上使用, 这个插件并不是我开发的

image.png

快捷键

我的触发插件的快捷键是 ctrl+f

请自行将代码里面的快捷键替换成自己插件的快捷键

效果

运行 js 代码后,

如果你选取了 华为

然后使用快捷键触发插件搜索

会自动在搜索框里面填充 华为, 并搜索

备注: 原来不会填充选取内容

image.png

js 代码

(()=>{
// 等待元素渲染完成后执行
function whenElementExist(selector) {
    return new Promise(resolve => {
        const checkForElement = () => {
            let isExist = false;
            if (typeof selector === 'function') {
                isExist = selector();
            } else {
                isExist = document.querySelector(selector);
            }
            if (isExist) {
                resolve(true);
            } else {
                requestAnimationFrame(checkForElement);
            }
        };
        checkForElement();
    });
}
async function fill_search_text(_t) {
    if (_t.length == 0) {
        return
    }
    whenElementExist('.b3-text-field.fn__size200').then(() => {
        document.querySelector('.b3-text-field.fn__size200').value = _t
    })
}

// 事件监听
document.addEventListener('keydown', async (event) => {
    if (event.ctrlKey && !event.shiftKey && !event.altKey && event.key === 'f') {
        //event.preventDefault(); // 防止快捷键默认行为
        fill_search_text(window.getSelection().toString())
    }
});

})()

  • 思源笔记

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

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

    23013 引用 • 92566 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    90 引用 • 561 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
EmberSky
如果感觉我的回答对你有帮助, 请点击 感谢 支持一下, 谢谢! 杭州