中文输入法导致的高频事件

场景:

input.addEventListener('input', (e) => {console.log(e.target.value)
});

当给一个输入框绑定了 input 事件,输入法切换到中文正在拼写的过程中也会触发 input 事件。

解决办法:

在中文拼写开始和结束的时候分别会触发 compositionstart 和 compositionend 事件,在 compositionstart 和 compositionend 之间,input 事件回调直接退出。

const input = document.querySelector('.inp');
let isComposition = false;function search() {console.log(input.value)
}input.addEventListener('input', (e) => {if (isComposition) return;search();
});// 输入法组合开始事件
input.addEventListener('compositionstart', () => {console.log('中文输入开始')isComposition = true;
});// 输入法组合结束事件
input.addEventListener('compositionend', () => {console.log('中文输入结束')isComposition = false;search();
});

Element UI 的 el-input 已经对中文输入进行了处理,所以我们不用额外去处理。

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

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

相关文章

Docker Compose部署项目flask+mysql + redis

什么是DockerCompose Docker Compose通过一个单独的docker-compose.yml 模板文件(YAML 格式)来定义一组相关联的应用容器,帮助我们实现多个相互关联的Docker容器的快速部署。 我们以flask+mysql redis项目为例 项目目录结构如下…

抖音视频怎么无水印下载(方法)

在这个数字化时代,抖音已经成为了人们生活中不可或缺的一部分。每天,数以亿计的用户在这个平台上分享着各种各样的视频,让人们笑,让人们感动,让人们沉迷。你是否曾经遇到过想要保存一段精彩的抖音视频却苦于无法去掉水…

Web自动化—Cypress 测试框架概述

🍅 视频学习:文末有免费的配套视频可观看 🍅 关注公众号【互联网杂货铺】,回复 1 ,免费获取软件测试全套资料,资料在手,涨薪更快 Cypress 测试框架概述 1.1 Cypress 默认文件结构 在Cypress安装…

Docker知识点汇总表格总结

Docker容器给我的一个很直观的感受就是将项目以及中间件安装变得比较简单直接,运行维护起来也更方便。之前做的一些微服务项目也是用docker来部署,现在很多开源的项目也流行使用docker来部署,简化了很多手动安装和配置的步骤,将项…

6.python网络编程

文章目录 1.生产者消费者-生成器版2.生产者消费者--异步版本3.客户端/服务端-多线程版4.IO多路复用TCPServer模型4.1Select4.2Epoll 5.异步IO多路复用TCPServer模型 1.生产者消费者-生成器版 import time# 消费者 def consumer():cnt yieldwhile True:if cnt < 0:# 暂停、…

【leetcode】链表反转题目总结

206. 反转链表 全部反转 递归法和迭代法 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int x, ListNode …

智能家居|基于SprinBoot+vue的智能家居系统(源码+数据库+文档)

智能家居目录 基于SprinBootvue的智能家居系统 一、前言 二、系统设计 三、系统功能设计 1管理员&#xff1a;个人中心管理功能的详细实现 2管理员&#xff1a;用户信息管理功能的详细实现 3管理员&#xff1a;家具管理功能的详细实现 4管理员&#xff1a;任务管理功能…

Python绘制的好看统计图

代码 sx [Accent, Accent_r, Blues, Blues_r, BrBG, BrBG_r, BuGn, BuGn_r, BuPu, BuPu_r, CMRmap, CMRmap_r, Dark2, Dark2_r, GnBu, GnBu_r, Greens, Greens_r, Greys, Greys_r, OrRd, OrRd_r, Oranges, Oranges_r, PRGn, PRGn_r, Paired, Paired_r, Pastel1, Pastel1_r, P…

C# var 关键字

在C#中&#xff0c;var 是一个关键字&#xff0c;用于声明一个隐式类型的局部变量。当使用 var 声明变量时&#xff0c;编译器会根据变量的初始化表达式推断出变量的具体类型&#xff0c;并将其隐式地设置为推断出的类型。 下面是对C#中 var 类型的详细解释和示例说明&#xf…

CSAPP | Floating Point

CSAPP | Floating Point b i b_i bi​ b i − 1 b_{i-1} bi−1​ … b 2 b_2 b2​ b 1 b_1 b1​ b 0 b_0 b0​ b − 1 b_{-1} b−1​ b − 2 b_{-2} b−2​ b − 3 b_{-3} b−3​ … b − j b_{-j} b−j​ S ∑ k − j i b k 2 k S\sum_{k-j}^{i}b_k\times2^k S∑k…

了解一下创新奇智的 Orion 分布式机器学习平台

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 创新奇智的 Orion 分布式机器学习平台是一个企业级的端到端机器学习解决方案&#xff0c;它通过整合智能资源调度中心&#xff08;IRC&#xff09;、智能数据自动化中心&#xff08;DAC&#xff09;和自…

HarmonyOS 4.0(鸿蒙开发)01 - 怎么学习鸿蒙引导篇

作为公司的全栈开发工程师 以及 未来的发展是有鸿蒙这个阶段的&#xff0c;以及本身具有这个技术栈由此后续会分享自己在实战中学习到的东西&#xff0c;碰到的bug都会分享出来&#xff0c;这是引导篇期待后续的更新 学习目标&#xff1a; 理解HarmonyOS操作系统的架构和开发…

三维坐标点按剖面分类

一、写在前面 ①配套文件&#xff1a;根据剖面对三维坐标点&#xff08;X,Y,Z&#xff09;分类资源-CSDN文库 ②脱敏处理&#xff1a;蚀变数据已采用随机数生成覆盖 ③剖面坐标按顺序排列在“剖面坐标点.xlsx”文件中 二、3点确定空间中平面方程 原理&#xff1a; 设3点A&…

YOLOv8主要命令讲解

YOLOv8主要有三个常用命令&#xff0c;分别是&#xff1a;train&#xff08;训练&#xff09;、predict&#xff08;预测&#xff09;、export&#xff08;转化模型格式&#xff09;&#xff0c;下面我将展开讲讲三个常用命令的常用参数与具体使用方法。 一、训练 通过自己标…

Docker容器---Harbor私有仓库部署与管理

一、搭建本地私有仓库 1、本地私有仓库简介 有时候使用Docker Hub这样的公共仓库可能不方便&#xff0c;这种情况下用户可以使用registry创建一个本地仓库供私人使用&#xff0c;这点跟Maven的管理类似。 2、使用私有仓库的优点 节省网络带宽&#xff0c;针对于每个镜像不用…

知乎广告开户流程,知乎广告的优势是什么?

社交媒体平台不仅是用户获取知识、分享见解的场所&#xff0c;更是品牌展示、产品推广的重要舞台。知乎作为国内知名的知识分享社区&#xff0c;以其高质量的内容生态和庞大的用户基础&#xff0c;成为了众多企业进行广告投放的优选之地。云衔科技通过其专业服务&#xff0c;助…

速盾:高防cdn-为您的网站防御cc/ddos

随着互联网的飞速发展&#xff0c;网站安全问题也日益突出。网站被黑客攻击的事件频频发生&#xff0c;给用户和网站运营商带来了巨大的损失。其中&#xff0c;CC攻击和DDoS攻击是最常见的攻击手段之一。为了有效应对这些攻击&#xff0c;提高网站的安全性&#xff0c;高防CDN成…

【ZIP技巧】zip压缩包太大,怎么缩小?

如果文件压缩成zip压缩包&#xff0c;但是压缩之后&#xff0c;体积仍然很大&#xff0c;该如何解决呢&#xff1f;今天分享ZIP压缩包太大的几个缩小方法。 方法一&#xff1a; 适当减少文件内的不必要文件。 方法二&#xff1a; 使用7-zip格式压缩包&#xff0c;会比zip格…

Python异步Redis客户端与通用缓存装饰器

前言 这里我将通过 redis-py 简易封装一个异步的Redis客户端&#xff0c;然后主要讲解设计一个支持各种缓存代理&#xff08;本地内存、Redis等&#xff09;的缓存装饰器&#xff0c;用于在减少一些不必要的计算、存储层的查询、网络IO等。 具体代码都封装在 HuiDBK/py-tools: …

java面试之MySQL数据库篇

文章目录 1.SQL分类2.关系型数据库和非关系型数据库的区别2.并发事务带来的问题(脏读、不可重复读以及幻读)&#xff0c;怎么解决&#xff1f;6.什么是索引&#xff1f;7.Btree索引跟Hash索引的区别8.有没有可能问B树、B树以及二叉树的区别9.对 MySQL 性能优化的理解9.1 硬件及…