自定义网址输入框

Greasy Fork is available in English.
自定义网址输入框

在网页底部添加一个网址输入框，显示当前网址并允许修改，并添加隐藏/展开功能，支持多行显示并自适应高度
当前为 2024-09-18 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         自定义网址输入框
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  在网页底部添加一个网址输入框，显示当前网址并允许修改，并添加隐藏/展开功能，支持多行显示并自适应高度
// @author       cat
// @match        *://*/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // 创建一个输入框
    const urlInput = document.createElement('textarea');
    urlInput.style.position = 'fixed';
    urlInput.style.bottom = '0';
    urlInput.style.left = '0';
    urlInput.style.width = '100%';
    urlInput.style.fontSize = '16px';
    urlInput.style.padding = '5px';
    urlInput.style.border = '1px solid #ccc';
    urlInput.style.backgroundColor = '#f9f9f9';
    urlInput.style.zIndex = '10000';
    urlInput.style.display = 'block'; // 默认显示
    urlInput.style.whiteSpace = 'pre-wrap'; // 允许换行
    urlInput.style.overflowWrap = 'break-word'; // 自动换行
    urlInput.style.resize = 'none'; // 禁止调整大小
    urlInput.style.overflow = 'hidden'; // 隐藏滚动条

    // 设置初始网址
    urlInput.value = window.location.href;

    // 创建一个按钮用于隐藏/展开输入框
    const toggleButton = document.createElement('button');
    toggleButton.innerText = '隐藏';
    toggleButton.style.position = 'fixed';
    toggleButton.style.bottom = '0';
    toggleButton.style.right = '0';
    toggleButton.style.zIndex = '10001';
    toggleButton.style.padding = '5px 10px';
    toggleButton.style.fontSize = '14px';
    toggleButton.style.cursor = 'pointer';

    // 添加输入框和按钮到页面
    document.body.appendChild(urlInput);
    document.body.appendChild(toggleButton);

    // 监听按钮点击事件
    toggleButton.addEventListener('click', function() {
        if (urlInput.style.display === 'none') {
            urlInput.style.display = 'block';
            toggleButton.innerText = '隐藏';
        } else {
            urlInput.style.display = 'none';
            toggleButton.innerText = '展开';
        }
    });

    // 监听输入框的回车事件
    urlInput.addEventListener('keydown', function(event) {
        if (event.key === 'Enter' && !event.shiftKey) {
            event.preventDefault(); // 防止默认的换行行为
            const newUrl = urlInput.value.trim();
            if (newUrl) {
                window.location.href = newUrl;
            }
        }
    });

    // 更新输入框的值为当前网址
    window.addEventListener('popstate', function() {
        urlInput.value = window.location.href;
        adjustHeight(urlInput);
    });

    // 监听输入框内容变化，调整高度
    urlInput.addEventListener('input', function() {
        adjustHeight(urlInput);
    });

    // 调整输入框高度的函数
    function adjustHeight(element) {
        element.style.height = 'auto'; // 先重置高度
        element.style.height = element.scrollHeight + 'px'; // 设置为内容高度
    }

    // 初始调整高度
    adjustHeight(urlInput);
})();