有时候,想在网页中做一些体验上的优化,可能会需要随时监听输入框中的变化,以此来帮助用户自动处理一些操作。
要在html网页中,监听输入框内容变化,可以设置input事件监听。不同框架有不同的设置方法,这里使用原生JS的设置方法,兼容性好一点。
document.getElementById("控制id").addEventListener("input",function(e){
//取值
var zsbh = document.getElementById("控制id").value;
//业务逻辑
if(zsbh.length==16){
}
});
如果有第二个输入框,也监听了内容变化,且在业务逻辑里,刚好有第一个输入框需要填的数据。
如果我们想在这里,直接给第一个输入框赋值,并触发刚才设置的input监听。那么,这时候光赋值是没用的,还需要使用触发的方法。下面一样使用原生JS来写触发的方法。
var evt = document.createEvent('HTMLEvents')
evt.initEvent('input', true, true)
document.getElementById("第一个控制id").dispatchEvent(evt);