js修改表单值不会触发input事件
前情
最近在做需求开发时候，需要监听表单的input事件
坑位
当通过JS动态修改表单的值的发现并不会触发表单的input事件
Why?
个人猜测是浏览器默认行为，input只会针对用户手动输入做响应
解决方案
方式1
在JS动态修改表单域值的时候，可以手动触发一下表单input事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>input测试</title>
</head>
<body>
<input type="text" id="inputTest">
<div contenteditable id="contenteditTest">123456</div>
</body>
</html>
var inputTest = document.querySelector('#inputTest');
var contenteditTest = document.querySelector('#contenteditTest');
inputTest.addEventListener('input', function(e) {
console.log('inputTest input')
}, false);
contenteditTest.addEventListener('input', function(e) {
console.log('contenteditTest input')
}, false);
// 直接修改不会触发表单元素的input事件
inputTest.value ='123456';
contenteditTest.innerHTML = '654321';
// 通过Event对象手动触发input事件
var event = new Event('input');
function setInputTest(val) {
inputTest.value =val;
inputTest.dispatchEvent(event);
}
function setContenteditTest(val) {
contenteditTest.innerHTML = val;
contenteditTest.dispatchEvent(event);
}
console.log('----分隔线----');
setInputTest(111111);
setContenteditTest(222222);
对于以上代码会在控制台输出
----分隔线----
inputTest input
contenteditTest input
Event MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/Event/Event
在线测试：
https://jsbin.com/pijeqezijo/edit?html,js,console,output
方式2
通过Mutation Observer API用来监视 DOM变动。DOM的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API都可以得到通知，示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="test" id="app">
<div class="item item-input" contentEditable></div>
</div>
</body>
</html>
// Firefox和Chrome早期版本中带有前缀
var MutationObserver = window.MutationObserver||
window.WebKitMutationObserver ||
window.MozMutationObserver;
// 选择元素
var input = document.querySelector('.item-input');
// 配置观察选项:
var inputConfig = {
childList: true,
subtree: true,
characterData: true
}
// 创建观察者对象
var observerInput = new MutationObserver(function(mutations) {
console.log('--observer item input--');
});
// 传入目标节点和观察选项
observerInput.observe(input, inputConfig);
// 主动触发一次
input.innerHTML = '123654';
在线测试：https://jsbin.com/nakobuv/2/edit?html,js,console,output
注意事项
以上解决方法有一定的兼容性风险，第一种情况ie全废，第二种兼容IE11，如果对IE低版本有兼容要求，可以把input里的处理逻辑抽取成函数，在动态修改表单值的时候，手动调一下上面抽取的函数。
js修改表单值不会触发input事件的更多相关文章
- input输入中文时，拼音在输入框内会触发input事件的问题。
问题描述: 监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 需要完成的需求就是在输入阶段不触发input中的事件,选词之后文字落 ...
- js jq输入框中按回车触发提交事件，用户在页面输入后按回车（Enter键）进行
js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行 代码如下: <!DOCTYPE html> <html lang="en" xm ...
- input、textarea等输入框输入中文时，拼音在输入框内会触发input事件的问题
监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 但是在很多情况下,只需要输入到输入框的中文字符. 解决办法: 通过查阅资料得知在 ...
- vant 使用field组件加载页面就触发input事件的坑，已解决
使用vant的时候,遇到一个坑,加载组件就自动触发input事件,input事件里写了验证,导致已加载就验证错误 原因:v-model绑定的时候写的是null, filed组件接收的时候把他转换成空字 ...
- 解决拼音输入法会触发input事件的问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...
- jquery 给input text元素赋值,js修改表单的值
简单粗暴: (第一种) $('#checkUserName').attr("value",sessionUser.name); (第二种) $("#checkUserNa ...
- delaycall.js 修改表单延迟自动提交的 jQuery / Zepto 插件
delaycall.js delaycall 是一个 jQuery / Zepto 插件,用于在用户完成某项操作后,延迟指定秒数后自动调动指定函数.如用户输入完内容后,延迟1秒,自动提交表单. Git ...
- JS 08表单操作_表单域
一.表单的获取方式 document.getElementById() document.forms[index]; document.forms[form_name] document.form_n ...
- JavaScript获取html表单值验证后跳转网页中的关键点
关键代码: 1.表单部分 <form action="Depart.jsp" name="myform" method="post" ...
- 改变input的值不会触发change事件的解决思路
通常来说,如果我们自己通过 value 改变了 input 元素的值,我们肯定是知道的,但是在某些场景下,页面上有别的逻辑在改变 input 的 value 值,我们可能希望能在这个值发生变化的时候收 ...
随机推荐
- 【QT性能优化】QT性能优化之QT6框架高性能网络编程框架实现百万TCP长连接网络服务器：QT是否适合做高性能网络应用？补天云这个视频告诉你在大厂Linux云服务器上的实测结果
QT性能优化之QT6框架高性能网络编程框架实现百万TCP长连接网络服务器 Ø 简介 本文作者编写了一套基于QT的TCP网络服务器程序和基于QT的TCP客户端程序,在某大厂的云服务器上进行了C1000K ...
- Java发展到现在，哪些技术可以放弃了？
各位好啊,我是会编程的蜗牛,作为java开发者,对于各类java开发技术.开发框架肯定是多少都要了解和知道的. 但是作为已经发展了几十年的java开发生态,各类技术层出不穷,有的新技术新框架已经对旧技 ...
- Redis系列补充：聊聊布隆过滤器（go语言实践篇）
★ Redis24篇集合 1 介绍 布隆过滤器(Bloom Filter)是 Redis 4.0 版本之后提供的新功能,我们一般将它当做插件加载到 Redis Service服务器中,给 Redis ...
- MySQL配置缓存查询和维护
配置文件设置缓存 query_cache_size = 20M #缓存大小 query_cache_type = ON #开启缓存 table_cache=256 #用于限制缓存表的最大数目,如果当前 ...
- opengl在编译的过程中，glad使用
我在编译的过程中,遇到:无法找到 -lglad这个错误.最后才发现对于glad的使用不能用-lglad.因为我们通过glad的在线服务可以得到一些文件,其中glad.c文件我们是需要放在我们的项目下面 ...
- nextjs 类装饰器
// 类装饰器 == 本质就是一个函数 // 在某个类的上面使用 @ // 可以等价于函数调用 doc(Zlx) // 不会破坏原有的类 可以扩展类 // "experimentalDeco ...
- .Net 反射的学习
// 反射 // 一切从 type 开始 2 种拿到 type 的方式 // 作用:动态的操作对象 获取属性 方法 特性 // 1. 拿到对象的 type // typeof(类); // 2. 拿到 ...
- element-admin - 图片上传组件 ImageUpload
预览详情 : 父组件:注册引入子组件 :只需要传递一个数据 limit :这是限制显示多少张图片 : 子组件: - 图片上传 - el-upload 代码 : <template> & ...
- docker打包镜像，上传镜像仓库，使用rancher发布
步骤一.首先将项目打包放在指定目录下 项目jar包名称为 micro-app.jar 步骤二.将jar包名称改为指定名称,执行命令 docker build -t micro-gateway: ...
- KubeKey 升级 KubeSphere 和 Kubernetes 补丁版本实战指南
作者:运维有术 前言 知识点 定级:入门级 KubeKey 如何升级 KubeSphere 补丁版本 KubeKey 如何升级 Kubernetes 补丁版本 KubeSphere 和 Kuberne ...