解决javascript修改input值无效的问题

弄堂汪

已于 2022-03-04 16:55:28 修改

阅读量4.2k

点赞数

分类专栏：笔记文章标签： chrome devtools

于 2022-03-04 16:48:17 首次发布

本文链接：https://blog.csdn.net/qq_17802895/article/details/123279856

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言:这是一次很艰难的探索，为解决一点简单的问题却绕了很大的弯子，千牛电商平台改价中不能批量加价，由于公司电脑是古老的xp系统，所以只能我想到用写浏览器扩展操作页面修改值，可是碰到了标题上的问题…

经过几天查询百度，查看360浏览器扩展开发文档等，寻找到了几个有参考价值的文章，特别是这个:
记录一次艰难，却很有意思的问题解决经历-React input
还有这篇文章:js 模拟键盘输入

细节不多说了，成功解决！上代码：

扩展程序包含下列文件

    bindEvent.js
    icon.png
    manifest.json
    popup.html
    method.js

method.js文件

chrome.extension.onRequest.addListener(
    function (request, sender, sendResponse)
{
    if (request.hello == "ok")
    {
		
		// 这里写代码... 
        var inputs = document.getElementsByTagName("input");
		var price = inputs[inputs.length - 1];
        var new_price = (parseFloat(price.value) + 1.5).toString();
		var message = "原价格:" + price.value.toString() + "新价格:" + new_price;
        // price.value = new_price;
		
		// 解决descriptor拦截value值的问题
		let lastValue = price.value;
		// 第一次修改input值
		price.value = new_price;
		let event = new Event('input',{bubbles:true});
		let tracker = price._valueTracker;
		if (tracker){
			// 被拦截后再次修改input值
			tracker.setValue(new_price);
		}
		price.focus();
		price.dispatchEvent(event);
		
		
        sendResponse(
		{
				data: "修改成功!"
				}
			);
		}
	}
);

bindEvent.js文件

var a = document.getElementById('a');
a.onclick = function () {
	chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
      chrome.tabs.sendRequest(tabs[0].id, { "hello": "ok" }, function (response) {
            alert(response.data);
        });
    });
}

manifest.json文件

    {
      "name": "阿狸扩展",
      "manifest_version": 2,
      "version": "1.0",
	  "author":"showbo,http://www.coding123.net",
      "description": "一个有趣的扩展程序。",
      "browser_action": {"default_popup": "popup.html","default_icon": "icon.png"},
      "content_scripts": [{"matches": ["*://*/*"],"js": ["method.js"]}],
      "permissions": ["*://*/*","tabs"],
      "devtools_page": "devtools.html"
    }

popup.html文件

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title></title></head>
<body>
<pre>请打开网站，然后运行。</pre>
<a id="a" href="#" size="20">start</a>

<script src="bindEvent.js">
</script>
</body>
</html>

总结:

本文主要是解决修改input值无效的问题，参考method.js文件，为了保证上下文可读性，所以放出全部的完整代码。

弄堂汪

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
解决javascript修改input值无效的问题

前言:这是一次很艰难的探索，为解决一点简单的问题却绕了很大的弯子，千牛电商平台改价中不能批量加价，由于公司电脑是古老的xp系统，所以只能我想到用写浏览器扩展操作页面修改值，可是碰到了标题上的问题…经过几天查询百度，查看360浏览器扩展开发文档等，寻找到了几个有参考价值的文章，特别是这个:记录一次艰难，却很有意思的问题解决经历-React input还有这篇文章:js 模拟键盘输入细节不多说了，成功解决！上代码：扩展程序包含下列文件 bindEvent.js icon.png .
复制链接

扫一扫