当前位置：首页 > news >正文

input框输入中文时，输入未完成触发事件。Vue中文输入法不触发input事件？

news 2025/7/3 16:25:58

前言

在做搜索输入框时，产品期待实时搜索，就是边输入边搜索，然而对于中文输入法出现的效果，不同的产品可能有不同的意见，有的觉得输入未完成也应该触发搜索。但有的却认为应该在中文输入完成后再触发搜索。我发现在vue中通过v-model绑定的输入框的值，确时正常的，在中文输入未完成的时候不会修改value的值。针对这两种情况，分别做了屏蔽输入过程的change事件和vue中触发change事件。毕竟不同的需求有不同的效果，为了满足各种情况，还是都掌握的好。

如何屏蔽中文输入过程的change事件

在输入拼音过程也会触发input事件，效果如下图：
在这里插入图片描述
在输入中文时，拼音输入法会先显示拼音，然后在选定一个拼音后，才把真正的汉字显示在输入框里。默认情况下，输入框的 input 事件会在拼音输入时就触发，这可能会导致一些不希望的情况。

为了解决这个问题，可以使用 compositionstart 和 compositionend 事件来检测是否拼音输入中。在拼音输入中，设置一个标志（例如 isComposing），表示正在进行拼音输入。然后，在 input 事件中，你可以检查这个标志，如果正在拼音输入，就不触发 input 事件的处理，直到拼音输入结束，你才处理最终的字符输入。

这个方法就像是在输入之前检查你是否正在输入拼音，如果是，就等拼音输入完了再处理最终的文字输入，以避免不必要的 input 事件触发。

示例

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>中文输入法拼音输入示例</title>
</head>
<body><input type="text" id="textInput" oninput="onInput(event)" placeholder="oninput" /><script>let isComposing = false;const input1 = document.getElementById('textInput');console.log("111111", input1)input1.addEventListener('compositionstart', e=>{console.log("监听开始");isComposing = true;})input1.addEventListener('compositionend', e=>{console.log("监听结束", );isComposing = false;const value = e?.target?.value;// 处理console.log("最终的值是：", value)})const onInput = (e)=>{setTimeout(()=>{if(!isComposing)console.log("输入完成了", e?.target?.value)},0)}</script>
</body>
</html>

在这里插入图片描述

compositionstart 事件：当用户开始使用输入法输入中文拼音时，这个事件会触发。在这个事件触发时，通常会显示拼音输入的提示或候选项。
compositionend 事件：当用户完成拼音的选择，输入法将真正的中文字符显示在输入框中时，这个事件会触发。这表示拼音输入结束，真正的字符已经确定。

如何解决vue中文不触发change事件

然而在vue中却是解决过此问题的，比如我有如下代码，input绑定value，watch监听value的变化，然后打印出value。我这里是vue3

<template><div><input v-model="value" /></div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
const value = ref('');
watch(value, (value) => console.log('输出value', value));
</script>

控制台输出如下：
在这里插入图片描述
如果你做的功能类似百度或者谷歌搜索就算是中文输入法，在输入的过程中也触发input事件，此时也需要去解决这个问题。
然而这个代码也就使用了v-model，又在官网上看到，v-model等同于:value+@input。那就试一试这个
在这里插入图片描述
然而将代码替换之后，效果就出来了，哈哈哈皆大欢喜，问题解决了

为什么会这样呢,看一下源码，
Vue 3 源码仓库：https://github.com/vuejs/vue-next

在这里插入图片描述
分析
根据提供的 Vue 3 的 vModel 源码，确实没有处理中文输入过程中的 change 事件，这是因为Vue 3 为了提高性能和减少不必要的事件触发，采取了一种更精细的事件处理策略。具体来说：

vModel 指令在 created 钩子中监听了 input 事件，而不是 change 事件。这是因为 input 事件更加实时，而 change 事件通常在输入框失去焦点时触发。所以 vModel 更关注实时的文本输入变化。
在处理 input 事件时，源码中通过检查 (e.target as any).composing 来避免在中文输入法输入过程中触发事件。这是因为在中文输入法输入时，文本可能会在用户还未完成输入时进行多次变化，如果每次都触发 input 事件可能导致性能问题。因此，只有当输入法输入完成时，才手动触发 input 事件。

具体来说，这段代码：

addEventListener(el, lazy ? 'change' : 'input', e => {if ((e.target as any).composing) return// ...
})

使用 (e.target as any).composing 来判断是否正在中文输入法的“组合”过程中，如果是，就不处理事件，直到输入法输入完成。这是为了避免不必要的事件触发。

中文输入过程是否需要触发事件，这个都是看需求怎么定，不同的场景有不同的需要，所以也不能算bug吧，但是作为程序员，问题总该要解决的。

input框输入中文时，输入未完成触发事件。Vue中文输入法不触发input事件？

前言

如何屏蔽中文输入过程的change事件

示例

如何解决vue中文不触发change事件

相关文章：

input框输入中文时，输入未完成触发事件。Vue中文输入法不触发input事件？

ArmSoM-RK3588编解码之mpp解码demo解析：mpi_dec_test

v-for列表渲染

【引流技术】最新头条全自动引流脚本，解放双手自动引流【引流脚本+技术教程】

智能PDU的“智能”体现在哪些方面？

Flutter和SwiftUI比较

使用ngrok内网穿透后，调用相关接口报ERR_NGROK_6024 异常

举个栗子！Alteryx 技巧（6）：从 API 中提取数据

算法、语言混编、分布式锁与分布式ID、IO模型

代码随想录 Day26 贪心 01 全集 LeetCode455 分发饼干 LeetCodeT346摆动序列 LeetCdoe T53 最大子数组和

【前端vue面试】TypeScript

vue-next-admin框架的认识

【2024秋招】2023-9-14 最右线下后端开发二面

LeetCode 2678. 老人的数目

java--三元运算符、运算符的优先级

在推荐系统中，BPRloss、Embloss、CrossEntropyloss是怎么计算的，代表的意义是什么

【Python语言速回顾】——异常文件操作

SAP POorPI RFC接口字段调整后需要的操作-针对SP24及以后的PO系统

【ArcGIS模型构建器】03：多个shp批量按属性分割（多个县区批量提取乡镇）

JavaScript中JSON和Bom对象模型

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

铭豹扩展坞 USB转网口突然无法识别解决方法

华为云AI开发平台ModelArts

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

CMake 从 GitHub 下载第三方库并使用

Java面试专项一-准备篇

AspectJ 在 Android 中的完整使用指南

排序算法总结（C++）

站群服务器的应用场景都有哪些？