[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())
    }
});

})()

  • 思源笔记

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

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

    24686 引用 • 101334 回帖 • 1 关注
  • 代码片段

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

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

    131 引用 • 869 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 虽然能填充,但并不能搜索耶。

    我改了一版,可以正常搜索了,并适配了 Mac 用户的按键习惯。

    (()=>{
    // 等待元素渲染完成后执行
    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(() => {
            const input = document.querySelector('.b3-text-field.fn__size200');
            input.value = _t
            input.dispatchEvent(new Event('input'));
            setTimeout(()=>{
                document.querySelectorAll('.icon--14_14')[1]?.parentElement?.click();
            }, 400);
        })
    }
    
    function isMac() {
        return navigator.platform.indexOf("Mac") > -1;
    }
    
    // 事件监听
    document.addEventListener('keydown', async (event) => {
        const ctrlKey = isMac() ? event.metaKey : event.ctrlKey;
        const controlKey = isMac() ? event.ctrlKey : event.metaKey;
        if (ctrlKey && !controlKey && !event.shiftKey && !event.altKey && event.key === 'f') {
            //event.preventDefault(); // 防止快捷键默认行为
            fill_search_text(window.getSelection().toString().trim())
        }
    });
    
    })()
    
    1 回复
  • EmberSky 1 评论

    你竟然发现了这个

    之前看到过这个帖子,只不过一直没用高亮插件
    wilsons
EmberSky
如果感觉我的回答对你有帮助, 请点击 感谢 支持一下, 谢谢! 杭州