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

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

news 2025/11/17 6:59:08

前言

在做搜索输入框时，产品期待实时搜索，就是边输入边搜索，然而对于中文输入法出现的效果，不同的产品可能有不同的意见，有的觉得输入未完成也应该触发搜索。但有的却认为应该在中文输入完成后再触发搜索。我发现在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 为了提高性能和减少不必要的事件触发，采取了一种更精细的事件处理策略。具体来说：

  1. vModel 指令在 created 钩子中监听了 input 事件，而不是 change 事件。这是因为 input 事件更加实时，而 change 事件通常在输入框失去焦点时触发。所以 vModel 更关注实时的文本输入变化。

  2. 在处理 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事件？

前言 在做搜索输入框时&#xff0c;产品期待实时搜索&#xff0c;就是边输入边搜索&#xff0c;然而对于中文输入法出现的效果&#xff0c;不同的产品可能有不同的意见&#xff0c;有的觉得输入未完成也应该触发搜索。但有的却认为应该在中文输入完成后再触发搜索。我发现在vu…...

编程日记 2023/10/24 8:26:20

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

1. 简介 [RK3588从入门到精通] 专栏总目录 mpi_dec_test 是rockchip官方解码 demo 本篇文章进行mpi_dec_test 的代码解析&#xff0c;解码流程解析 2. 环境介绍 硬件环境&#xff1a; ArmSoM-W3 RK3588开发板 软件版本&#xff1a; OS&#xff1a;ArmSoM-W3 Debian11 3.…...

编程日记 2023/10/24 8:25:19

v-for列表渲染

一、v-for迭代数组 <li v-for"(e,index) in emp" :key"e.id">编号{{index1}} 名字{{e.name}} 年龄{{e.age}} </li> e 是循环数组中的每个元素的别名index 是当前循环的下表&#xff0c;从0开始:key 的作用&#xff1a; 是为了给 Vue 一个提示…...

编程日记 2023/10/24 8:24:18

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

软件功能&#xff1a; 评论点赞 适用于自己做头条号,去别人评论区截留,点赞,别人会收到提醒,达到回访效果 文章/视频评论 可以自己发布引流文章或视频,引导进你主页或者私信你,达到引流效果 设备需求&#xff1a; 安卓手机8.1及以上系统 文章分享者&#xff1a;Linxiaoyu…...

编程日记 2023/10/24 8:23:17

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

智能PDU是一种用于管理和监控数据中心或其他设施中的电源分配设备&#xff0c;通过引入以太网络、语音服务等新颖的通讯手段&#xff0c;增加了传统机柜PDU插座所不能提供的智能管理控制模块和控制芯片&#xff0c;同时兼具电源分配和管理功能。智能PDU是当今现代化IDC数据中心…...

编程日记 2023/10/24 8:22:16

Flutter和SwiftUI比较

0.语言 SwiftUI 毫无疑问是Swift语言编写&#xff0c; 在2019年正式推出&#xff0c;目前最新是Swift 5.9 (2023年9月)&#xff0c;由Apple公司维护和发行&#xff1b; 该编程语言发明人已离职Apple。 语言官网&#xff1a;https://developer.apple.com/swift/ 最好用Xcode编…...

编程日记 2023/10/24 8:21:15

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

header增加&#xff1a;ngrok-skip-browser-warning:69420即可。如下图&#xff1a;...

编程日记 2023/10/24 8:19:12

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

你听说过从 API 中提取数据吗&#xff1f;API 是指应用编程接口&#xff0c;是计算机之间或计算机程序之间的连接&#xff0c;它是一种软件接口&#xff0c;让不同的软件进行信息共享。对于很多数据分析师来说&#xff0c;他们常常需要从 API 中提取数据&#xff0c;那么如何快…...

编程日记 2023/10/24 8:18:11

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

一、算法初识 数据结构和算法是程序的基石。我们使用的所有数据类型就是一种数据结构&#xff08;数据的组织形式&#xff09;&#xff0c;写的程序逻辑就是算法。 算法是指用来操作数据、解决程序问题的一组方法。 对于同一个问题&#xff0c;使用不同的算法&#xff0c;也…...

编程日记 2023/10/24 8:17:10

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

前言:贪心无套路 本质: 局部最优去推导全局最优 两个极端 贪心算法的难度一般要么特别简单,要么特别困难,所以我们只能多见识多做题,记住无需数学证明,因为两道贪心基本上毫无关系,我们只需要去思考局部最优即可 贪心的小例子 比如有一堆钞票&#xff0c;你可以拿走十张&#x…...

编程日记 2023/10/24 8:16:09

【前端vue面试】TypeScript

目录 快速入门0、TypeScript简介1、TypeScript 开发环境搭建2、基本类型3、编译选项4、webpack5、Babel面向对象1、类（class）2、面向对象的特点3、接口（Interface）4、泛型（Generic）快速入门 0、TypeScript简介 TypeScript是JavaScript的超集。它对JS进行了扩展，向JS中引…...

编程日记 2023/10/24 8:15:07

vue-next-admin框架的认识

最近利用这个框架二开了一个后台管理系统&#xff0c;这里简单介绍一下&#xff0c;后续会进行框架的修改等文章 1&#xff1a;介绍 Vue-next-admin是一个基于Vue3和Element-Plus的后台管理系统框架。它提供了一套完整的、易于扩展的后台管理界面解决方案&#xff0c;可用于快…...

编程日记 2023/10/24 8:13:05

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

1 OS 1.1 讲讲什么是虚拟内存&#xff0c;怎么实现的 虚拟内存是一种存储器管理能力&#xff0c;它使得一个应用程序似乎有更多的物理内存&#xff08;RAM&#xff09;可用&#xff0c;而实际上&#xff0c;系统使用了一部分硬盘空间来模拟额外的 RAM。通过使用虚拟内存&…...

编程日记 2023/10/24 8:12:04

LeetCode 2678. 老人的数目

【LetMeFly】2678.老人的数目 力扣题目链接&#xff1a;https://leetcode.cn/problems/number-of-senior-citizens/ 给你一个下标从 0 开始的字符串 details 。details 中每个元素都是一位乘客的信息&#xff0c;信息用长度为 15 的字符串表示&#xff0c;表示方式如下&#…...

编程日记 2023/10/24 8:11:03

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

1.三元运算符介绍 1.格式&#xff1a;条件表达式&#xff1f;值1&#xff1a;值2&#xff1b; 2.执行流程&#xff1a;首先计算关系表达式的值&#xff0c;如果值为true&#xff0c;返回值1&#xff0c;如果为false&#xff0c;返回值2 2.运算符优先级 1.在表达式中&#xf…...

编程日记 2023/10/24 8:08:59

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

一、BPRloss&#xff08;Bayesian Personalized Ranking loss&#xff09;是一种用于推荐系统中的损失函数&#xff0c;用于衡量预测的排序与真实的用户行为排序之间的差异。BPRloss的计算过程如下&#xff1a; 输入&#xff1a;BPRloss的输入包括用户u、物品i和物品j&#xff…...

编程日记 2023/10/24 8:07:56

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

目录 一、异常 1、检测异常try语句 2、抛出异常 3、异常处理流程 二、文件操作 1、打开文件 ①文件模式acess_mode ②文件缓冲区 2、基本的文件方法 ①读和写、关闭文件 ②读取行 ③文件重命名 ④删除文件&#xff08;系统中已存在的文件&#xff09; 3、基本的目…...

编程日记 2023/10/24 8:06:55

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

文章目录 问题描述解决办法 问题描述 在SAP系统的RFC接口结构中添加了字段&#xff0c;RFC也重新引用到了PO系统&#xff0c;Cache和CommunicationChannel都刷新或启停了&#xff0c;但是新增的字段在调用接口的时候数据进不到SAP系统&#xff0c;SAP系统内的值也出不来。经过…...

编程日记 2023/10/24 8:05:54

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

文章目录 一、数据预览二、模型构建三、保存模型一、数据预览 加载实验数据： 本试验实现将两个县区的数据分割为乡镇数据。 二、模型构建 1. 添加数据文件夹 将县区数据所在的根目录文件夹拖进模型。 2. 添加要素类迭代器 插入→迭代器→要素类。 用连接工具，将数据文件…...

编程日记 2023/10/24 8:04:53

JavaScript中JSON和Bom对象模型

JSON JSON是一种轻量级的数据交换格式 简洁和清晰的层次结构使得JSON成为理想的数据交换语言 易于人们解析和生成&#xff0c;并有效的提升网络传输效率 javaScript一切皆为对象&#xff0c;任何js支持的对象都可以使用JSON来表示 格式&#xff1a; 对象都用[] 数组都用{}…...

编程日记 2023/10/24 8:03:52

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2025/11/17 4:38:04

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2025/11/16 21:47:32

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2025/11/14 9:22:33

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/11/14 21:56:52

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/11/8 5:57:07

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/10/18 0:50:34

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2025/11/17 1:19:52

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

编程新知 2025/11/15 1:41:43

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

编程新知 2025/10/2 19:46:59

yaml读取写入常见错误 (‘cannot represent an object‘, 117)

错误一&#xff1a;yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因&#xff0c;后面把yaml.safe_dump直接替换成yaml.dump&#xff0c;确实能保存&#xff0c;但出现乱码&#xff1a; 放弃yaml.dump&#xff0c;又切…...

编程新知 2025/11/17 0:40:04