要監聽輸入框的輸入，首先想到的是oninput事件，對與這些在遇到拼音輸入法時總是很頭疼，因爲拼音輸入法會先把拼音放入輸入框，這是也會觸發事件帶來不少困擾，這裏就推薦兩個h5的新事件來解決這個煩惱，這個就是compositionstart（中文拼音輸入法開始輸入時監聽）和compositionend（中文拼音輸入法輸入完成時監聽）減少不少的煩惱，下邊一個實例一起來看下這兩個事件的魅力吧！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.inputs {
width: 600px;
height: 60px;
margin: 20px;
font-size: 24px;
color: #000000;
}
.inputs::-webkit-input-placeholder {
color: #42B983;
}
</style>
</head>
<body>
<input type="text" id="inputs" placeholder="請輸入內容" class="inputs">
</body>
<!--
爲了方便展示這裏用jQuery衆所熟知的技術，
這個爲cdn的方便查看，可以換成之際jq文件
-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let val = $('#inputs').val()
$('#inputs')
.on('input',event => {
console.log('這是input事件', val)
})
.on('compositionstart',event => {
// 中文輸入法開始輸入
console.log('這是compositionstart事件', val)
})
.on('compositionend',event => {
// 中文輸入法結束輸入
console.log('這是compositionend事件', val)
})
</script>
</html>