使用中文输入法时监听input长度产生错误的解决办法

最新推荐文章于 2025-03-11 14:14:21 发布

原创最新推荐文章于 2025-03-11 14:14:21 发布 · 661 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端小细节专栏收录该内容

2 篇文章

订阅专栏

本文分享了在个人博客中使用输入法时遇到的标题字符计数问题，并介绍了通过监听compositionstart和compositionend事件解决拼音未确定即计入长度的技术。通过简单的代码实现，确保了输入法输入的准确统计。

项目场景：

有天在做个人博客时，编辑文章的标题部分想copy一下CSND的处理，后面加个字数统计（因为经常用看习惯了哈哈）。实现方法很简单，监听一下input事件，拿value的长度渲染出来。
在这里插入图片描述

问题描述：

结果发现使用中文输入法时出现了问题，打出来的拼音还没有按确定，但已经被算进value的长度了。
在这里插入图片描述

解决方案：

上网搜了一下，原来input有事件是可以监听到输入法的

compositionstart和compositionend用来监听输入法的开始与结束。

方法找到了，问题就很好解决了，我们设置一个变量来保存输入法开始与结束的状态，然后在input里判断就好了，直接贴代码：

HTML:

<div class="header-input">
  <span>文章标题：</span>
  <div>
    <input 
      v-model="articleInfo.title" 
      maxlength="100" 
      @input="titleChange" 
      @compositionstart="onCompositionStart"
      @compositionend="onCompositionEnd"/>
    <span v-if="titleNum >= 5" v-text="titleNum + '/100'"></span>
    <span v-else>标题不得小于5个字</span>
  </div>
</div>

JS:

titleChange(e) {
  if (!this.isCN) {
    this.titleNum = e.target.value.length
  }
},
onCompositionStart() {
  this.isCN = true
},
onCompositionEnd() {
  this.isCN = false
}