<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- <button>点击</button> -->
<input type="text" />
<span></span>
<script>
const input = document.querySelector('input')
let isChinese = false
input.addEventListener('compositionstart', function (ev) {
// 该事件类型与 input 类似的，都是在用户进行输入时被触发
// 区别在于 该事件在针对中文输入时，只有文字确定后才会触发
// console.log("文字输入了");
// 该事件只有在输入中文时才会触发
console.log('你正在输入的中文...')
isChinese = true
})
input.addEventListener('compositionend', function (ev) {
// 该事件类型与 input 类似的，都是在用户进行输入时被触发
// 区别在于 该事件在针对中文输入时，只有文字确定后才会触发
// console.log("文字输入了");
// 该事件只有在输入中文时才会触发
console.log('你正在输入的中文输入结束了...')
document.querySelector('span').innerHTML = this.value.length
isChinese = false
})
input.addEventListener('input', function () {
if (isChinese) return
document.querySelector('span').innerHTML = this.value.length
})
</script>
</body>
</html>
