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