input 输入框中文，监听的input事件 屏蔽拼音状态

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);
}