0x00 前言

文章首发于t00ls。

老板说,我们工时一天就写那么点内容,竟然敢填9小时,不方便他统计每个项目的时常。。。

所以以后填工时的时候,要写项目编号、项目名称、用时。。。

好吧,老板说啥就是啥,以后摸鱼都不能好好摸了。。。

扯远了,按照老板这样的要求,每次填的时候,都要打开另一个系统,搜项目名称,复制粘贴项目编号和名称,然后再去填工时的系统上填。。。。

还是老规矩,产品经理没有排期,有生之年系列,得,自理更生吧

先看最终效果:

0x01 思路

说实话,我大部分时间,都用来找库了,终于让我找到了https://github.com/yuku/textcomplete

然后在 https://github.com/yuku/old-textcomplete 这里搞到了用法。。。

textcomplete.register([{
  // Emoji strategy
  match: /(^|\s):(\w+)$/,
  search: function (term, callback) {
    callback(emojies.filter(emoji => { return emoji.startsWith(term); }));
  },
  replace: function (value) {
    return '$1:' + value + ': ';
  }
}, {
  // Another strategy
  ...
}]);

对于我来说,剩下的就是正则匹配中文,以及因为我是在对话框上填的,我用的这个系统,需要解决蒙版问题,即把zIndex调大就行

对了,还有一点是,点击不同的框,都是不一样的(废话),所以我这里用了定时器让它一直处理。。

0x02 代码

不多bb,直接看代码:

// ==UserScript==
// @name         项目编号填充
// @namespace    https://fengwenhua.top/
// @version      1.0
// @description  输入项目名,出现编号,选择填充
// @author       江南小虫虫
// @match        *://baidu.com/*
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
    // 添加需要的js
    var js = document.createElement("script");
    js.src = "https://cdn.bootcdn.net/ajax/libs/jquery.textcomplete/1.8.5/jquery.textcomplete.js";
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(js);

    // 检查输入对话框是否存在
    function check() {
        if ([...document.querySelectorAll(".form-control.input-sm.field-memos")].filter(elm => !elm.closest('#hidden_area_products')).length > 0) {
            return true;
        } else {
            return false;
        }

    }
    // 修改css样式
    function change_css() {
        //console.log("修改css");
        if (document.querySelector(".textcomplete-dropdown")) {
            //console.log(document.querySelector(".textcomplete-dropdown").style.zIndex);
            let all_dropdown = document.querySelectorAll(".textcomplete-dropdown");
            for (let i of all_dropdown) {
                if (i.style.zIndex != 3000) {
                    i.style.zIndex = 3000;
                }
            }
            // if (document.querySelector(".textcomplete-dropdown").style.zIndex != 3000) {
            //     document.querySelector(".textcomplete-dropdown").style.zIndex = 3000;
            // }
            clearInterval(change_css_timer);
        }
    }

    // 给对话框绑定textcomplete
    function add_text_complete() {
        if (check()) {
            //console.log("进来");
            var words = [
                "xxxxx  xx项目",
                "yyyy  yy项目",
            ];

            $(".form-control.input-sm.field-memos").textcomplete([{
                match: /(^|\s)([\u4E00-\u9FA5]{1,})$/,
                search: function(term, callback) {
                    callback($.map(words, function(word) {
                        return word.indexOf(term) != -1 ? word : null;
                    }));
                },
                replace: function(word) {
                    return ' ' + word + ' ';
                }
            }]);
            clearInterval(text_complete_timer);
        }
    }

    // 使用定时器操作
    var change_css_timer = window.setInterval(change_css, 500);
    var text_complete_timer = window.setInterval(add_text_complete, 1000);
    var old_node = $(".form-control.input-sm.field-memos");
    window.setInterval(function() {
        let new_node = $(".form-control.input-sm.field-memos");
        if (old_node[0] != new_node[0]) {
            change_css_timer = window.setInterval(change_css, 500);
            text_complete_timer = window.setInterval(add_text_complete, 1000);
            old_node[0] = new_node[0];
        }
    }, 500);
})();

0x03 后言

脚本虽小,但是却花了我半天的时间。。。希望能帮助到有同样需求的童鞋

最后修改:2021 年 10 月 05 日 10 : 58 AM
如果觉得我的文章对你有用,请随意赞赏