B站旧版搜索栏 - 添加清除搜索框内容按钮

添加旧版搜索栏清除搜索框内容按钮
目前為 2024-06-05 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name         B站旧版搜索栏 - 添加清除搜索框内容按钮
// @namespace    mscststs
// @version      0.5
// @license      ISC
// @description  添加旧版搜索栏清除搜索框内容按钮
// @author       mscststs
// @match        https://*.bilibili.com/*
// @icon         https://www.bilibili.com/favicon.ico
// @require      https://gf.qytechs.cn/scripts/38220-mscststs-tools/code/MSCSTSTS-TOOLS.js?version=713767
// @run-at       document-body
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var url = document.URL;
    if(!(url.startsWith("https://space.bilibili.com/") || url.startsWith("https://www.bilibili.com/v/"))) {
        StartSearchKeyword();
        async function StartSearchKeyword(){
            await mscststs.wait(".international-header .nav-search .nav-search-keyword");

            var searchCleanHtml = "<div class='nav-search-clean has-keyword'><svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M8 14.75C11.7279 14.75 14.75 11.7279 14.75 8C14.75 4.27208 11.7279 1.25 8 1.25C4.27208 1.25 1.25 4.27208 1.25 8C1.25 11.7279 4.27208 14.75 8 14.75ZM9.64999 5.64303C9.84525 5.44777 10.1618 5.44777 10.3571 5.64303C10.5524 5.83829 10.5524 6.15487 10.3571 6.35014L8.70718 8.00005L10.3571 9.64997C10.5524 9.84523 10.5524 10.1618 10.3571 10.3571C10.1618 10.5523 9.84525 10.5523 9.64999 10.3571L8.00007 8.70716L6.35016 10.3571C6.15489 10.5523 5.83831 10.5523 5.64305 10.3571C5.44779 10.1618 5.44779 9.84523 5.64305 9.64997L7.29296 8.00005L5.64305 6.35014C5.44779 6.15487 5.44779 5.83829 5.64305 5.64303C5.83831 5.44777 6.15489 5.44777 6.35016 5.64303L8.00007 7.29294L9.64999 5.64303Z' fill='#ced0d4'></path></svg></div>";

            var searchKeyword = document.querySelector(".international-header .nav-search .nav-search-keyword");

            searchKeyword.insertAdjacentHTML("afterend", searchCleanHtml);
            var searchClean = document.querySelector(".nav-search-clean.has-keyword");
            searchClean.style.cssText = "display:flex; justify-content:center; align-items:center; width:16px; height:16px; right:10px; cursor:pointer; visibility:hidden;";
            var navSearchform = document.querySelector(".international-header .mini-type .nav-search #nav_searchform");
            navSearchform.style.cssText = "display:flex; height:36px!important; align-items:center;";

            searchKeyword.oninput = function() {
                //alert(searchKeyword.value);
                if(searchKeyword.value != "") {
                    searchClean.style.visibility = "inherit";

                } else if(searchKeyword.value == "") {
                    searchClean.style.visibility = "hidden";
                }
            }
            searchKeyword.addEventListener('focus', function() {
                if(searchKeyword.value != "") {
                    searchClean.style.visibility = "inherit";
                }
            });
            /*searchKeyword.addEventListener('blur', function() {
                if(searchKeyword.value == "") {
                    searchClean.style.visibility = "hidden";
                }
            });*/

            /*await mscststs.wait(".suggest-wrap .histories .history-item");
            var historyItems = document.querySelectorAll(".suggest-wrap .histories .history-item");
            await mscststs.wait(".suggest-wrap .trending-item");
            var trendingItems = document.querySelectorAll(".suggest-wrap .trending-item");
            var number = historyItems.length >= trendingItems.length ? historyItems.length : trendingItems.length;
            for (var integer = 0; integer < number; integer++) {
                if(integer < historyItems.length) {
                    historyItems[integer].addEventListener("click", function(){searchClean.style.visibility = "inherit";}, false);
                }
                if(integer < trendingItems.length) {
                    trendingItems[integer].addEventListener("click", function(){searchClean.style.visibility = "inherit";}, false);
                }
            }*/

            var searchPath = document.querySelector(".nav-search-clean.has-keyword path");
            searchClean.onmouseover = function() {
                searchPath.setAttribute("fill", "#61666d");
            }
            searchClean.onmouseout = function() {
                searchPath.setAttribute("fill", "#ced0d4");
            }

            searchClean.onclick = function() {
                // 设置input的值
                searchKeyword.value = "";

                // 触发input事件
                var event = new Event('input', { bubbles: true });
                searchKeyword.dispatchEvent(event);
            }
        }
    }
})();
欢迎访问Greasy Fork镜像
