前情
最近在做需求開發時候，需要監聽表單的input事件
坑位
當通過JS動態修改表單的值的發現並不會觸發表單的input事件
Why?
個人猜測是瀏覽器默認行爲，input只會針對用戶手動輸入做響應
解決方案
在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
注意事項
以上解決方法有一定的兼容性風險，ie全廢，如果對IE有兼容有要求，可以把input裏的處理邏輯抽取成函數，在動態修改表單值的時候，手動調一下上面抽取的函數。