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

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

如题
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.focus()
            inputs.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.dispatchEvent(event);
            inputs.dispatchEvent(eve3nt);
            //inputs.blur();
            },1000)
      }
      //},1000)C:\Users\Y\Pictures\1722677276304.jpg
    }
在网站中插入一个按钮,点击之后就会更改input中的值,鼠标失焦后按理说就会提交表单数据保存了。这个代码之前还能用,但是现在网站更新了,失效了
要改下面的数字

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

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

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

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

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

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

// ==UserScript==
// @name         Input Value Script
// @namespace    http://tampermonkey.net/
// @version      0.1
// @descriptionSet 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.value = "你想输入的值"; // 设置你想输入的值
            
            // 创建一个 input 事件,以便让网页知道值已经改变
            var event = new Event('input', {
                bubbles: true,
                cancelable: true,
            });
            inputs.dispatchEvent(event);

            // 你可能还需要触发 change 事件
            var changeEvent = new Event('change', {
                bubbles: true,
                cancelable: true,
            });
            inputs.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
// @descriptionSet 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.value = valueToInput; // 设置值
            
            // 创建并触发事件
            let event = new Event('input', { bubbles: true });
            inputs.dispatchEvent(event);

            let changeEvent = new Event('change', { bubbles: true });
            inputs.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.addEventListener('input', function() {
                localStorage.setItem('savedInputValue', this.value); // 保存当前输入值
            });
      }
    };
})();

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

// ==UserScript==
// @name         Auto Reset Input Value
// @namespace    http://tampermonkey.net/
// @version      0.1
// @descriptionKeeps 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.value = valueToInput; // 设置值
            
            let event = new Event('input', { bubbles: true });
            inputs.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
// @descriptionSet 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
// @descriptionKeep 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 小助理,如未能正确解答您的问题,请继续追问。
页: [1]
查看完整版本: 用油猴写js脚本在input中输入值网页上会显示但是不生效