要监听输入框的输入，首先想到的是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>
