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

news2024/11/15 6:05:56

前言

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

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

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

为了解决这个问题,可以使用 compositionstartcompositionend 事件来检测是否拼音输入中。在拼音输入中,设置一个标志(例如 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吧,但是作为程序员,问题总该要解决的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1126108.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

安全、高效远程访问大数据分析平台解决方法:Splunk Enterprise+Cpolar

文章目录 前言1. 搭建Splunk Enterprise2. windows 安装 cpolar3. 创建Splunk Enterprise公网访问地址4. 远程访问Splunk Enterprise服务5. 固定远程地址 前言 Splunk Enterprise是一个强大的机器数据管理平台&#xff0c;可帮助客户分析和搜索数据&#xff0c;以及可视化数据…

安装docker ,更换docker版本

docker dockerd & containerd Dockerd&#xff08;Docker 守护进程&#xff09;在其底层使用 Containerd 来管理容器。Containerd 是一个开源的容器运行时管理器&#xff0c;由 Docker 公司于2017年开发并开源&#xff0c;它负责实际的容器生命周期管理。 以下是 Docker 守…

Web前端-Vue2+Vue3基础入门到实战项目-Day5(自定义指令, 插槽, 案例商品列表, 路由入门)

自定义指令 基本使用 自定义指令: 自己定义的指令, 可以封装一些dom操作, 扩展额外功能全局注册// 1. 全局注册指令 Vue.directive(focus, {// inserted 会在 指令所在的元素, 被插入到页面中时触发inserted (el) {// el 就是指令所绑定的元素// console.log(el)el.focus()} …

hive 问题解决 Class path contains multiple SLF4J bindings

hive输入命令时出现日志冲突提示&#xff08;问题不复杂&#xff0c;是个warn&#xff0c;强迫症解决&#xff0c;做项目经常遇到&#xff0c;项目里是处理maven。这里处理方法思路类似。&#xff09; 问题&#xff1a; SLF4J: Class path contains multiple SLF4J bindings. …

【Java集合类面试十二】、HashMap为什么线程不安全?

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;HashMap为什么线程不安全…

Python Opencv实践 - 车辆统计(2)检测线绘制,车辆数量计数和显示

针对我所使用的视频&#xff0c;对上一节的代码进行了修改&#xff0c;增加了更多参数。 Python Opencv实践 - 车辆统计&#xff08;1&#xff09;读取视频&#xff0c;移除背景&#xff0c;做预处理_亦枫Leonlew的博客-CSDN博客示例中的图像的腐蚀、膨胀和闭运算等需要根据具…

通过执行mysql命令查看mysql版本

第一种一条SQL命令搞定 SELECT version() 第二种操作方式 在终端输入命令即可查询 命令&#xff1a;mysql -V 第三种操作方式 在终端输入命令[也就是进入数据库的命令] 命令&#xff1a;mysql -uroot -p 第三种操作方式 需要进入数据库内输入命令进行查询&#xff1b; 命…

逐字稿 | 视频理解论文串讲(下)【论文精读】

1 为什么研究者这么想把这个双流网络替换掉&#xff0c;想用3D 卷积神经网络来做&#xff1f; 大家好&#xff0c;上次我们讲完了上半部分&#xff0c;就是 2D 网络和一些双流网络以及。它们的。变体。今天我们就来讲一下下半部分&#xff0c;就是 3D 网络和 video Transformer…

layui框架实战案例(24):layedit工具栏添加查看源代码按钮的解决方案

layUI框架实战案例系列文章 layui框架实战案例(21)&#xff1a;layui上传的哪些事(layui.upload组件、 file文件域、php后台上传)layui框架实战案例(20)&#xff1a;常用条件判断和信息展示技巧(图片预览、动态表格、短信已读未读、链接分享、信息脱敏、内置框架页)layui框架实…

企业如何防止文件泄密(图文+视频讲解)

数字化浪潮的推动下&#xff0c;企业文件已经成为企业竞争的核心资产之一。同时&#xff0c;文件泄密事件也频频发生&#xff0c;给企业带来了巨大的经济损失和声誉损失。 那如何有效地防止文件泄密已成为企业亟待解决的重要问题&#xff01;在查阅了大量资料后&#xff0c;小编…

Linux进程间通信之匿名管道

Linux进程间通信之匿名管道 进程间通信介绍1. 进程间通信的目的2. 进程间通信发展 什么是管道匿名管道1. 什么是匿名管道2. 匿名管道样例详解3. 原理4. 单个父进程与多个子进程管道间通信建立子进程任务相关的头文件主文件的建立执行结果 5. 管道读写规则6. 管道特点 进程间通信…

基于图像识别的跌倒检测算法 计算机竞赛

前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于图像识别的跌倒检测算法 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-senior/…

分布式事务及CAP和BASE定理

一、分布式事务 单体应用肯定就不存在分布式事务了&#xff0c;只有在分布式微服务系统中&#xff0c;各个服务之间通过RPC调用后&#xff0c;每个微服务有自己和数据库的连接&#xff0c;各个微服务的回滚不影响其他的微服务事务&#xff0c;这几必须使用分布式事务来解决分布…

CASAIM自动激光3D测量系统助力海外家电组装企业IQC来料检测装配尺寸测量

随着家电产品的不断创新发展&#xff0c;海外家电组装企业也面临着越来越高的质量标准&#xff0c;几何尺寸测量与控制是保证产品交付质量的基础。零部件、外壳壳体经过国内或东南亚其他地区生产好后&#xff0c;为了确保产品质量和一致性&#xff0c;外协件物料需要送往组装厂…

FDWS9510L-F085车规级 PowerTrench系列 P沟道增强型MOS管

PowerTrench MOSFET 是优化的电源开关&#xff0c;可提高系统效率和功率密度。 它们组合了小栅极电荷 (Qg)、小反向恢复电荷 (Qrr) 和软性反向恢复主体二极管&#xff0c;有助于快速切换交流/直流电源中的同步整流。 采用屏蔽栅极结构&#xff0c;可提供电荷平衡。 利用这一先进…

吃瓜教程2|线性模型

线性回归 “广义的线性模型”&#xff08;generalized linear model&#xff09;&#xff0c;其中&#xff0c;g&#xff08;*&#xff09;称为联系函数&#xff08;link function&#xff09;。 线性几率回归&#xff08;逻辑回归&#xff09; 线性判别分析 想让同类样本点的…

biocParallel学习

我好像做了一个愚蠢的测试 rm(listls()) suppressPackageStartupMessages({library(SingleCellExperiment)library(scMerge)library(scater)library(Matrix) })setwd("/Users/yxk/Desktop/test/R_parallel/") load("./data/exprsMat.RData") load(".…

文心一言 VS 讯飞星火 VS chatgpt (119)-- 算法导论10.3 4题

四、用go语言&#xff0c;我们往往希望双向链表的所有元素在存储器中保持紧凑&#xff0c;例如&#xff0c;在多数组表示中占用前m 个下标位置。(在页式虚拟存储的计算环境下&#xff0c;即为这种情况。)假设除指向链表本身的指针外没有其他指针指向该链表的元素&#xff0c;试…

laravel框架介绍(二) 打开站点:autoload.php报错

Laravel&#xff1a;require..../vendor/autoload.php错误的解决办法 打开站点&#xff1a;http://laraveltest.com:8188/set_api-master/public/ set_api-master\public\index.php文件内容为&#xff1a; 解决办法&#xff1a; 1. cd 到该引用的根目录&#xff0c;删除 compo…

【JavaEE初阶】 常见的锁策略详解

文章目录 &#x1f6ec;常见的锁策略&#x1f334;乐观锁 vs 悲观锁&#x1f38b;读写锁&#x1f333;重量级锁 vs 轻量级锁&#x1f384;自旋锁&#xff08;Spin Lock&#xff09;&#x1f340;公平锁 vs 非公平锁&#x1f38d;可重入锁 vs 不可重入锁 &#x1f6eb;相关面试题…