1.当输入讲师姓名,显示对应讲师的相关的信息,但是拼音输入过程中会高频请求后台数据库
2.于是乎,就想着屏蔽这些拼音阶段,代码如下:
<script type="text/javascript">
var cpLock = true;
$('#teacherName').on('compositionstart', function () {
cpLock = false;
});
$('#teacherName').on('compositionend', function () {
cpLock = true;
});
$('body').on('input', '#teacherName', function () {
if(cpLock) {
if (cpLock) {
// TODO
console.log("=======teachername=========" + $("#teacherName").val());
}
}
});
</script>
3.控制可以,但是总要在输入一次空格才能触发,很纳闷,后来发现,少了东西
<script type="text/javascript">
var cpLock = true;
$('#teacherName').on('compositionstart', function () {
cpLock = false;
});
$('#teacherName').on('compositionend', function () {
cpLock = true;
});
$('body').on('input', '#teacherName', function () {
setTimeout(function(){
if(cpLock) {
if (cpLock) {
// TODO
console.log("=======teachername=========" + $("#teacherName").val());
}
}
},1)
});
</script>
4.原来我的小心机
//为解决拼音输入时还未确认汉字,英文字母就触发事件,设置flag,只有flag为true时输入有效
//因为选词结束的时候input会比compositionend先一步触发,此时flag还未调整为true,所以加入setTimeout延时
补充一个:
实现监控input输入框的粘贴和实时的填写数据,其中updateMediaInfo为需要调用的函数
window.onload = function() {
document.getElementById('videoUrl').addEventListener('input',updateMediaInfo,false);
}