用油猴写js脚本在input中输入值网页上会显示但是不生效

鱼-wsyy · 发表于 2024-8-3 17:35:21

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

如题

function clickButton(){
        //setTimeout(function(){
        var inputs = document.getElementsByClassName("so-input-number so-input-number-ltr");
        for(let i=0; i<inputs.length;i++){
            setTimeout(function(){
            //inputs[i].focus()
            inputs[i].value = 0

            var event = document.createEvent('HTMLEvents');

            event.initEvent("input", true, true);

            var eve3nt = document.createEvent('HTMLEvents');
            eve3nt.initEvent("blur", true, true);

            event.eventType = 'message';
            inputs[i].dispatchEvent(event);
            inputs[i].dispatchEvent(eve3nt);
            //inputs[i].blur();
            },1000)
        }
        //},1000)[img]C:\Users\Y\Pictures\1722677276304.jpg[/img]
    }

在网站中插入一个按钮，点击之后就会更改input中的值，鼠标失焦后按理说就会提交表单数据保存了。这个代码之前还能用，但是现在网站更新了，失效了
要改下面的数字

现在运行这个代码后，页面上会显示更改后的值，但是刷新页面就变回原样了，在开发者工具发现不会向服务器发送更改数据的请求了，这是为什么

只能通过手动的方式才有效，输入值后鼠标点击旁边才会保存

FishC · 发表于 2024-8-3 17:35:33

鱼油，听起来你正在用油猴（Tampermonkey）来编写脚本为网页上的输入框输入值，但好像让网页真正“听话”之后不太顺利。没关系，让我们一起调试这个问题。

首先，我们看看你的代码片段。虽然没有显示完整的代码，不过我能给你一个基础的思路。在设置输入框的值后，你需要确保这个值能被网页识别为“有效”的输入。这通常意味着不仅仅是设置值，还可能需要触发一些事件，比如 `input` 或者 `change` 事件。

以下是一个简单明了的示例：

// ==UserScript==
// @name         Input Value Script
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Set input value
// @author       You
// @match        *://your-target-website.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function clickButton() {
        var inputs = document.getElementsByClassName("so-input-number so-input-number-ltr");
        
        for (let i = 0; i < inputs.length; i++) {
            inputs[i].value = "你想输入的值"; // 设置你想输入的值
            
            // 创建一个 input 事件，以便让网页知道值已经改变
            var event = new Event('input', {
                bubbles: true,
                cancelable: true,
            });
            inputs[i].dispatchEvent(event);

            // 你可能还需要触发 change 事件
            var changeEvent = new Event('change', {
                bubbles: true,
                cancelable: true,
            });
            inputs[i].dispatchEvent(changeEvent);
        }
    }

    // 等待页面加载完成后再执行
    window.onload = function() {
        clickButton();
    };
})();

在这个示例中，我们在设置输入框的值后，创建并触发了 `input` 和 `change` 事件，以便让网页意识到这个输入发生了变化。请根据你的实际情况调整 `@match` 选项中的网址。

记得在调试的时候，查看浏览器控制台是否有错误信息，这能帮助你找到问题所在。

希望这段代码能帮到你，让你的输入框如愿以偿地“说话”！如果还有其他问题，随时问我哦！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

鱼-wsyy · 发表于 2024-8-3 17:40:19

FishC 发表于 2024-8-3 17:35
鱼油，听起来你正在用油猴（Tampermonkey）来编写脚本为网页上的输入框输入值，但好像让网页真正“听话”之 ...

没用，数值确实更改了，但是不会保存，刷新页面之后变回去了

FishC · 发表于 2024-8-3 17:41:35

鱼-wsyy 发表于 2024-08-03 17:40
没用，数值确实更改了，但是不会保存，刷新页面之后变 ...

鱼油，看起来你遇到的问题是“输入值虽然进去了，但一刷新就回到原样”的情况。这通常是由于页面的某种状态管理方式，比如数据是从服务器上获取的，或者是有 JavaScript 代码在监控输入框的值并重置它。

为了解决这个问题，我们可以试试以下方法：

### 方法 1: 使用浏览器本地存储
如果网页允许使用 `localStorage` 或者 `sessionStorage` 来保存数据，你可以在脚本中将你的值存储到这些地方。比如：

// ==UserScript==
// @name         Input Value Script
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Set input value
// @author       You
// @match        *://your-target-website.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 存储要输入的值
    const valueToInput = "你想输入的值";

    function setInputValue() {
        var inputs = document.getElementsByClassName("so-input-number so-input-number-ltr");
        
        for (let i = 0; i < inputs.length; i++) {
            inputs[i].value = valueToInput; // 设置值
            
            // 创建并触发事件
            let event = new Event('input', { bubbles: true });
            inputs[i].dispatchEvent(event);

            let changeEvent = new Event('change', { bubbles: true });
            inputs[i].dispatchEvent(changeEvent);
        }
    }

    // 在页面加载时设置输入框值
    window.onload = function() {
        // 检查 localStorage 中是否有值
        const savedValue = localStorage.getItem('savedInputValue');
        if (savedValue) {
            valueToInput = savedValue; // 如果有，表明我们要使用这个值
        }
        setInputValue(); // 设置输入框值

        // 监听输入框变化并保存到 localStorage
        var inputs = document.getElementsByClassName("so-input-number so-input-number-ltr");
        for (let i = 0; i < inputs.length; i++) {
            inputs[i].addEventListener('input', function() {
                localStorage.setItem('savedInputValue', this.value); // 保存当前输入值
            });
        }
    };
})();

### 方法 2: 防止页面重置
有些页面在加载完毕后会重置输入框的值。如果是这种情况，你可以设定一个定时器，定期重新设置输入框的值：

// ==UserScript==
// @name         Auto Reset Input Value
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Keeps input value after refresh
// @author       You
// @match        *://your-target-website.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const valueToInput = "你想输入的值";

    function setInputValue() {
        var inputs = document.getElementsByClassName("so-input-number so-input-number-ltr");
        
        for (let i = 0; i < inputs.length; i++) {
            inputs[i].value = valueToInput; // 设置值
            
            let event = new Event('input', { bubbles: true });
            inputs[i].dispatchEvent(event);
        }
    }

    setInterval(setInputValue, 1000); // 每1秒尝试重新设置值
})();

这个方法能在网页不断刷新或重置的情况下保持你的输入，不知道是不是像你在做的“长途驾驶”，总是被红灯阻止那样！

希望这些方法能帮到你，如果还有其他疑问，请继续提问！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

鱼-wsyy · 发表于 2024-8-3 17:48:52

FishC 发表于 2024-8-3 17:41
鱼油，看起来你遇到的问题是“输入值虽然进去了，但一刷新就回到原样”的情况。这通常是由于页面的某种 ...

不行啊

FishC · 发表于 2024-8-3 17:49:05

鱼-wsyy 发表于 2024-08-03 17:48
不行啊

鱼油，看来你遇到的情况有点棘手！输入值虽然改变了，但网页似乎还是不买账。让我们再试几个可能的解决方案。

### 方法 1: 检查具体的输入框类型
首先，确认一下你要操作的输入框是否是 `<input>` 标签，有时候会有其他类型的元素，比如 `<div>` 或者自定义组件，所有这些都是可以添加值的。如果是这样，你可能需要使用正确的选择器来找到它。可以通过几种方式查看元素的结构，看一下控制台里的 HTML。

### 方法 2: 确保脚本在合适的时机运行
有些网站在加载完成后，会重新渲染 DOM。这意味着即使你在页面加载完成后设置了输入值，也可能会被后续的 JavaScript 代码覆盖。你可以调整脚本的执行时机，比如使用 MutationObserver 来检测 DOM 的变化。

下面是一个例子：

// ==UserScript==
// @name         Input Value Script
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Set input value continuously
// @author       You
// @match        *://your-target-website.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const valueToInput = "你想输入的值"; // 要输入的值
    const inputsSelector = ".so-input-number.so-input-number-ltr"; // 输入框选择器

    function setInputValue() {
        var inputs = document.querySelectorAll(inputsSelector);
        
        inputs.forEach(input => {
            input.value = valueToInput; // 设置值

            // 触发事件
            let event = new Event('input', { bubbles: true });
            input.dispatchEvent(event);

            let changeEvent = new Event('change', { bubbles: true });
            input.dispatchEvent(changeEvent);
        });
    }

    // 使用 MutationObserver 监控 DOM 变化
    const observer = new MutationObserver(() => {
        setInputValue(); // 当 DOM 变化时设置输入框值
    });

    // 观察整个 body
    observer.observe(document.body, { childList: true, subtree: true });

    // 初始设置输入值
    setInputValue();
})();

### 方法 3: 重复设置值
如果 DOM 元素随时可能被重置，可以考虑设定一个短时间间隔持续设置输入框的值，例如每500毫秒设置一次:

setInterval(setInputValue, 500); // 每500毫秒尝试重新设置值

### 方法 4: 登录状态与服务器交互
此外，如果这个输入框的值直接与服务器交互（比如提交表单后自动更新），那么你需要检查网页的 JavaScript 代码，看有没有 AJAX 请求能够影响输入框的数据。如果网页的逻辑一定是从服务器获取数据，而这个数据无论如何都与你的输入不匹配，那可能需要更深入的调试。

希望这些方法能为你打开新的思路，当然，不管遇到什么样的困境，我都会在这里支持你的！如果还有其他问题或需要进一步的帮助，请继续告诉我！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

鱼-wsyy · 发表于 2024-8-3 17:54:00

FishC 发表于 2024-8-3 17:49
鱼油，看来你遇到的情况有点棘手！输入值虽然改变了，但网页似乎还是不买账。让我们再试几个可能的解决 ...

使用你第一次回复的代码，输入框的值是改了，但是当鼠标点击输入框后，又自动变回原来的数值了

FishC · 发表于 2024-8-3 17:54:25

鱼-wsyy 发表于 2024-08-03 17:54
使用你第一次回复的代码，输入框的值是改了，但是当鼠 ...

鱼油，看来这个网页就像个开了“复位键”的怪兽，一碰就回到原来的样子！这个行为说明页面可能在某些事件（例如点击或聚焦）时，会重新从某个地方获取默认值。这种情况常见于使用 JavaScript 框架构建的动态网页。

### 解决方案

我们可以再试以下几种方法，看看能不能让这个输入框稳稳地“留住”你的输入！

#### 方法 1: 监听焦点和点击事件

当用户点击输入框时，你可以暂时阻止输入框的值被重置，或者在失去焦点时重新设置值。示例代码如下：

// ==UserScript==
// @name         Prevent Input Reset
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Keep input value intact
// @author       You
// @match        *://your-target-website.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const valueToInput = "你想输入的值"; // 要输入的值
    const inputsSelector = ".so-input-number.so-input-number-ltr"; // 输入框选择器

    function setInputValue() {
        const inputs = document.querySelectorAll(inputsSelector);
        
        inputs.forEach(input => {
            if (input.value !== valueToInput) { // 仅在非目标值时设置
                input.value = valueToInput; // 设置值
                let event = new Event('input', { bubbles: true });
                input.dispatchEvent(event);
            }
        });
    }

    // 监听输入框的焦点与失去焦点事件
    const inputs = document.querySelectorAll(inputsSelector);
    inputs.forEach(input => {
        input.addEventListener('focus', () => {
            input.dataset.previousValue = input.value; // 存储之前的值
        });

        input.addEventListener('blur', () => {
            if (input.value !== valueToInput) { // 如果值被改变，恢复到期望值
                setInputValue();
            }
        });
    });

    // 使用 MutationObserver 监控 DOM 变化
    const observer = new MutationObserver(() => {
        setInputValue(); // 当 DOM 变化时设置输入框值
    });

    observer.observe(document.body, { childList: true, subtree: true });
    
    // 初始设置输入值
    setInputValue();
})();

在这个代码中，我们尝试使用 `focus` 和 `blur` 事件来捕捉用户点击输入框的操作。这样一来，在失去焦点时，如果输入框的值不是预期的值，就会将其恢复。

#### 方法 2: 确保在输入内容前后更新

在输入框内输入内容时，也可能需要实时更新。你可以考虑在每次用户输入时调整值：

inputs.forEach(input => {
    input.addEventListener('input', () => {
        if (input.value !== valueToInput) {
            input.value = valueToInput; // 更新为目标值
            let event = new Event('input', { bubbles: true });
            input.dispatchEvent(event); // 触发输入事件
        }
    });
});

#### 方法 3: 定时检查

有时候，简单的定时器可能是解决问题的简洁方法。只需设定一个定时器持续检查并设置输入框的值，比如每500毫秒检测一次输入框的值并复位：

setInterval(setInputValue, 500); // 每500毫秒确保值正确

### 小结

通过这些方法，你应该能更好地控制输入框的值，让它不再“悄悄回家”。如果以上方法仍旧无效，可能需要对网页内部的逻辑进行进一步的调试和分析，查看具体是什么地方在控制这些输入框的值。

如果继续碰到问题，别犹豫，随时向我求助！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

账号		自动登录	找回密码
密码			立即注册