填表助手

将input加select选项

当前为 2021-06-07 提交的版本,查看 最新版本

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         填表助手
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  将input加select选项
// @author       You
// @include      http://*/*
// @include      https://*/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function() {
    "use strict";
    //在此填入要用的选项 格式a=['包子叔','www.wangxinyang.xyz','66666']
    let a=['包子叔','www.wangxinyang.xyz','66666']






    //下面一般用户不要操作!!!!!!-------------------------------------------------------------

    let str=''
    for (let i = 0; i < a.length; i++) {
        str+=`<option value="${a[i]}">${a[i]}</option>`
    }
    let inputs = document.getElementsByTagName("input");

    for (let i = 0; i < inputs.length; i++) {
        // console.log(inputs[i].type);
        if (
            inputs[i].type != "text" &&
            inputs[i].type != undefined &&
            inputs[i].type != null &&
            inputs[i].type != ""
        ) {
            continue;
        }

        let a = document.createElement("select");
        a.click=( function(event){
            console.log("button-click");
            // 阻止事件冒泡到DOM树上
            event.stopPropagation(); // 只执行button的click,如果注释掉该行,将执行button、p和div的click (同类型的事件)
        } );

        a.onchange = function () {
            console.log(this.value);
            this.previousSibling.value = this.value;
        };

        a.style = "visibility:hidden;width:100px;z-index:999;padding: 5px 12px;font-size: 14px;line-height: 20px;color: var(--color-text-primary);vertical-align: middle;background-color: var(--color-input-bg);background-repeat: no-repeat;background-position: right 8px center;border: 1px solid var(--color-input-border);border-radius: 6px;outline: none;box-shadow: var(--color-shadow-inset);";
        a.innerHTML = str;
        insertAfter(a, inputs[i]);
        inputs[i].onfocus=function(){
            this.nextSibling.style.visibility = 'visible';
        }
        a.onblur=function(){
            this.style.visibility = 'hidden'
        }
    }


    function insertAfter(newElement, targetElement) {
        //   console.log(targetElement);
        // newElement是要追加的元素 targetElement 是指定元素的位置
        let parent = targetElement.parentNode; // 找到指定元素的父节点
        //   console.log("pr", parent);

        if (parent.lastChild == targetElement) {
            // 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法
            parent.appendChild(newElement, targetElement);
        } else {
            parent.insertBefore(newElement, targetElement.nextSibling);
        }
    }
    console.log('正在使用包子填表小助手,欢迎来我博客玩~ www.wangxinyang.xyz')

    // Your code here...
})();