keydown, input,change,compsition事件的区别

于 2023-07-24 04:42:02 发布
阅读量214 收藏
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuanyemanong/article/details/131887668
版权

前言

本文主要总结下与文本输入的相关的事件。

测试地址见: 在线效果预览

keydown 事件

从按钮按下到弹起，会依次触发keydown、 beforeinput, keypress、keyup事件,

  • keydown和keyup分别在用户按下与松开按键的时候触发
  • keypress(不推荐), beforeinput 会在按下**可显示内容（字符键：数字/字母/符号）**后在 keydown 之后触发，非字符键(Enter, Backspace, Delete, Esc)则不会。

这也就意味着如果我们想阻止默认的输入行为，就只能在keydown中进行对应的处理(此时浏览器默认行为未完成，输入框还没有更新显示)， 一般会配合event.key或者event.code来判断. 关于keyCode可以看看这篇告别JS keyCode

input 事件

当输入元素的值发生改变时，将触发"input"事件，无论是键盘输入还是通过粘贴、剪切等方式改变值。

"input"事件的特点是，它实时响应用户输入，并且对于支持自动填充和预测文本的浏览器，输入过程中也会触发该事件。

change 事件

"change"事件在用户完成输入并且焦点从输入元素移开后触发。与"input"事件不同，"change"事件在用户确认完成输入后才会执行。(可以留意下文末的 gif 图)

同时，其他的表单表单元素也会触发change事件: radio, checkbox selection, input[type="file"], input[type="date"]

composition 合成事件

"composition"事件主要用于处理复杂的文本输入，例如中文输入法的候选词选择过程。它在输入法组合文本时触发，而不是在每次输入字符时触发。

"compositionstart"事件标志着合成过程的开始，"compositionupdate"事件用于在合成过程中更新文本，最后，当合成文本确定时，将触发"compositionend"事件。

对于React来说，需要做用户输入过滤拦截的时候，一定要考虑合成事件，不能简单地用onChange事件

用户输入事件触发顺序

在存在用户输入法输入的时候，事件的触发顺序如图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-opeXW8xN-1690144903164)(https://cdn.jsdelivr.net/gh/chenxiaoyao6228/cloudimg@main/2023/html-input-order-composition.gif)]

总结

本文只是简单的列举了一些文本输入相关的事件，实际项目中会遇到比较多的兼容性问题，需要针对对应的问题进行处理。

参考

逍遥的编程笔记
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js中keyup-keypress-keydown以及oninput四个事件
FGstudy的博客
10-01 1887
关于js中keyup, keypress, keydown以及oninput四个事件 基本知识 简述 keydown事件：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。 keypress事件：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。 keyup事件：当用户释放键盘上的键时触发。 oninput事件：在 <input> 或 &l...
利用Keydown事件阻止用户输入实现代码
01-19
先了解下各事件的区别 KeyDown：在控件有焦点的情况下按下键时发生 KeyPress：在控件有焦点的情况下按下键时发生 KeyUp： 在控件有焦点的情况下释放键时发生 1、KeyPress主要用来接收字母、数字等ANSI字符。KeyDown ...
js 聚焦事件 focus blur input 节流 键盘事件 keydown keyup 防抖 滚轮事件
蒲公英芽的博客
01-07 5256
FocusEvent事件 主要针对所有表单元素和超链接，当 input 聚焦时触发 focus 事件，失去焦点时触发 blue 事件。 focus 获得焦距 blue 失去焦距 事件对象中 relatedTarget 为上一个失焦对象 <input type="text" name="text" id="user"> <script> var user=documen...
HTML+JS 实现 input 框回车事件
m0_55080712的博客
09-09 1万+
很多时候input框我们输入结束后都习惯直接按回车，而不是点击button。在form表单中可以实现点击回车即可提交表单，但如果只是一个单独的input框，则无法通过直接按回车来提交内容。这种情况我们可以使用JavaScript脚本实现input框回车事件，其实现方法很简单，这里用到了jQuery框架，代码如下：只需要在script标签中直接加入以下内容即可。keycode==13即代表按下了回车键，同理可以通过更改此代码实现其他按键的触发事件。
js-键盘事件
weixin_47295886的博客
10-26 2043
在文本框中输入内容，属于onkeydown的默认行为，使用return false;取消默认行为，则输入的内容不会出现在文本框中。判断：ctrl和Y是否同时被按下。
JS监听input、keydown，有输入法时打字完成后触发事件
天天写代码⎝⏠⏝⏠⎠
12-28 9848
在给输入框绑定input或keydown事件时 预期效果是有输入法时，输入中文后触发事件，不希望输一个字母就触发一次事件 可以用到compositionstart，compositionend。 主流浏览器都兼容   var flag = true; $('#div-detail').delegate('#sclt-div input', 'input', function () { ...
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
01-21
1、KeyPress主要用来接收字母、数字等ANSI字符 KeyDown 和 KeyUP 事件过程通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键 2、KeyPress 只能捕获单个字符 KeyDown 和KeyUp 可以捕获组合键。...
深入理解JQuery keyUp和keyDown的区别
12-10
定义和用法完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。 当按钮被按下时，发生 keydown ...[removed][removed][removed]$(document).ready(function(){ $(“input”).keydown(function(){ $
html js不触发_[面试官系列] input、change、keydown、keypress、keyup 触发的时机是？
weixin_39979159的博客
11-20 413
我认为这道题是一个挺有意思的题，但是回答正确的面试者很少，今天我来聊一聊。先上 DJ，哦不对先上 DEMO，测试地址：https://www.lilnong.top/static/html/textarea-event-test.html事件含义及触发时机focus、blur获取焦点 (focus)、失去焦点(blur)。属于FocusEvent接口。keydown、keypress...
在JS/jQuery中，怎么触发input的keypress/keydown/keyup事件？
weixin_30596735的博客
03-20 826
怎么触发keypress/keydown/keyup事件？ 问题： 1、在之前的写的input后面添加了搜索按钮 2、input只有keyup事件，如下： $("#desktop_folder_keyword, #internal_search_input,#update_search_input").off("keyup.desktopToolbar").on("keyup...
输入框事件监听(一)：keydown、keyup、input
热门推荐
甘焕的博客
08-30 9万+
当输入框的值发生变化时，我们可以通过keydown、keyup、input、onchange、blur事件观察到其值的变化，但它们的应用时机与应用场景存在显著的差异
js input 框输入监听事件(keyup、nzBlur)
小武的博客
10-22 4034
&lt;input type="text" placeholder="名称" (keyup)="searchDataByName()" (nzBlur)="tab($event)"&gt; &lt;script&gt; function tab(event){ console.log(event); } &lt;/script&g
js keyup、keypress和keydown事件 详解
mengleiyuan的博客
10-19 7065
js keyup、keypress和keydown事件 详解 js keyup、keypress和keydown事件都是有关于键盘的事件 当一个按键被pressed 或released在每一个现代浏览器中，都可能有三种客户端事件。 keydown event keypress event keyup event keydown事件发生在键盘的键被按下的时候，接下来触发keypress事件。keyup事件在按键被释放的时候触发。 这三个事件在页面中的使用方法如下例： <input i...
js keyup、keypress和keydown事件 详解
weixin_30527143的博客
11-05 604
js keyup、keypress和keydown事件 详解 js keyup、keypress和keydown事件都是有关于键盘的事件 当一个按键被pressed 或released在每一个现代浏览器中，都可能有三种客户端事件。 keydown event keypress event keyup event keydown事件发生在键盘的键被按下的时候，接下来触发keyp...
Jquery--实现input keydown回车触发登录事件
JustinQin
12-07 1万+
一、说明 任意触发 不管当前焦点在哪个input输入框，只要回车就触发事件，如登录界面。 指定触发 指定某个input输入框回车时才触发事件。 二、实现 HTML代码 <body> 输入框1：<input id="inputId1" name="inputName1" class="className1"/><br> 输入框2：<in...
js input绑定enter回车键事件
南来北往的客
05-19 2万+
input绑定enter回车键事件
keydown 、keyup、input区别
@you的博客
05-17 1308
@keydown是按下键盘时触发事件，但是不带按下的键盘内容；如需要输入abc，按下c的时候使用keydown触发事件，传过去的内容只有ab @keyup是松开键盘触发事件 @input是文本事件，文本内容变的时候就会触发事件 顺序 keydown =》input=》keyup ...
js 给input添加keydown事件
最新发布
05-28
可以使用以下代码为input元素添加keydown事件： ```javascript var inputElement = document.getElementById("myInput"); inputElement.addEventListener("keydown", function(event) { // 在此处理按键事件 }); ``` 其中，`myInput` 是input元素的ID，你需要将其替换为实际的ID。在事件处理函数中，你可以对按键事件进行处理，例如判断按下的键是哪个键等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值