输入框输入中文显示字数问题解决

2022-07-18 13:04:22 阅读：149 来源： 互联网

标签：isChinese 触发中文 log 输入框字数 input 输入

问题：输入中文时如xin 新会显示字数：1 2 3 1 这不是我们想要的在输入xin 新时应该是 1 不能把 xin 计算进去

<!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>

	<!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>

标签：isChinese,触发,中文,log,输入框,字数,input,输入
来源： https://www.cnblogs.com/zhulongxu/p/16490023.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

输入框输入中文显示字数问题解决