本文探讨了在JavaScript中动态修改表单输入值时，为何input事件不会自动触发，并提供了手动触发input事件的方法。解决方案包括使用Event对象模拟用户输入，但要注意兼容性问题，尤其是IE系列浏览器。
前情
最近在做需求开发时候，需要监听表单的input事件
坑位
当通过JS动态修改表单的值的发现并不会触发表单的input事件
Why?
个人猜测是浏览器默认行为，input只会针对用户手动输入做响应
解决方案
在JS动态修改表单域值的时候，可以手动触发一下表单input事件
<!DOCTYPE html><html><head> <meta charset="utf-8" 重庆干部培训 https://eedgz.swupl.edu.cn/ > <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 inputcontenteditTest inputEvent MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/Event/Event
在线测试：
https://jsbin.com/pijeqezijo/edit?html,js,console,output
注意事项
以上解决方法有一定的兼容性风险，ie全废，如果对IE有兼容有要求，可以把input里的处理逻辑抽取成函数，在动态修改表单值的时候，手动调一下上面抽取的函数。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
