keydown、keyup 属于键盘事件,input 属于文本事件。

  1. keydown:当用户按下键盘上的任意按键时触发,如果按住不放,会重复触发此事件。
  2. keyup:当用户释放键盘上的按键时触发。
  3. input:当元素内容发生改变时触发,这些元素指 <input>、<select>、<textarea> 和指定了 contenteditable 属性的元素。

举个例子:当我们在一个输入框中输入文本时,会依次触发下列事件:

keydown 事件 ——> input 事件 ——> keyup 事件。

每个事件传递给事件处理函数的事件对象的目标元素值(event.target.value)是这样的(假设开始时输入框中有一个文本 你,我们又输入了 好):

  1. keydown 事件的目标元素值:你。
  2. input 事件的目标元素值:你好。
  3. keyup 事件的目标元素值:你好。

可以观察到,keydown 事件返回的值是输入框之前那个状态时包含的值,这一点要注意。

(完)

keydown、input 和 keyup 事件的更多相关文章

  1. 在JS/jQuery中,怎么触发input的keypress/keydown/keyup事件?

    怎么触发keypress/keydown/keyup事件? 问题: 1.在之前的写的input后面添加了搜索按钮 2.input只有keyup事件,如下: $("#desktop_folde ...

  2. IOS系统兼容input keyup事件

    最近在做移动端模糊搜索功能,js监听input的keyup事件,在chrom模拟器和android手机环境运行都没有问题,到了ios手机却出现bug,没法实现功能: 查了好一会资料,发现keyup事件 ...

  3. keyup事件、keydown事件和input事件的区别

    keydown.keyup 属于键盘事件,input 属于文本事件 详细说明: keydown:当用户按下键盘上的任意按键时触发,如果按住不放,会重复触发此事件. keyup:当用户释放键盘上的按键时 ...

  4. keyDown keyPress keyUp 事件的区别

    keyDown keyPress keyUp  事件的区别 一 触发顺序 显而易见,事件发生的顺序是: keydown --> keypress --> keyup 当按住一个键一段时间后 ...

  5. Winform下KeyDown,KeyPress,KeyUp事件的总结(转)

    原文: http://www.cnblogs.com/xiashengwang/archive/2011/09/15/2578798.html 在winform程序中,经常会用到这几个事件用于控制数字 ...

  6. C#控件中的KeyDown、KeyPress 与 KeyUp事件浅谈

    研究了一下KeyDown,KeyPress 和 KeyUp 的学问.让我们带着如下问题来说明: 1.这三个事件的顺序是怎么样的? 2.KeyDown 触发后,KeyUp是不是一定触发? 3.三个事件的 ...

  7. KeyDown,KeyPress 和KeyUp

    研究了一下KeyDown,KeyPress 和KeyUp ,发现之间还是有点学问的.让我们带着如下问题来说明,如果你看到这些问题你都知道,那么这篇文章你就当复习吧:) 1.这三个事件的顺序是怎么样的? ...

  8. 2019-3-22KeyDown,KeyPress 和 KeyUp 事件

    研究了一下KeyDown,KeyPress 和 KeyUp 的学问.让我们带着如下问题来说明: 1.这三个事件的顺序是怎么样的? 2.KeyDown 触发后,KeyUp是不是一定触发? 3.三个事件的 ...

  9. IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题

    先上图: 可以看到输入框中的内容和弹出框的内容不一致, <input class="am-fr labRight" id="txcode" type=&q ...

随机推荐

  1. alpine docker 镜像 时区问题

    1. 时区处理 RUN apk update && apk add curl bash tree tzdata \ && cp -r -f /usr/share/zon ...

  2. android资源目录---assets与res/raw区别

    android资源目录---assets与res/raw的不同 Android 2011-05-24 14:40:21 阅读20 评论0   字号:大中小 订阅 assets:用于存放需要打包到应用程 ...

  3. Spring Batch介绍

    简介 SpringBatch 是一个大数据量的并行处理框架.通常用于数据的离线迁移,和数据处理,⽀持事务.并发.流程.监控.纵向和横向扩展,提供统⼀的接⼝管理和任务管理;SpringBatch是Spr ...

  4. XAMPP配置8080端口

    IIS需要HTTP服务,这个服务占用了80端口. Apache启动不了,为了都可以使用,将Apache端口改为8080.

  5. 使用airodump-ng扫描网络

    执行命令 root@sch01ar:~# airodump-ng wlan0mon 参数介绍: BSSID:表示无线AP的Mac地址 PWR:网卡报告的信号水平 Beacons:无线AP发出的通告编号 ...

  6. springboot成神之——log4j2的使用

    本文介绍如何在spring-boot中使用log4j2 说明 依赖 日志记录语句 log4j2配置文件 本文介绍如何在spring-boot中使用log4j2 说明 log4j2本身使用是非常简单的, ...

  7. Python Twisted架构英文版

    原作出处:twisted-intro 作者:Dave 转载声明:版权归原作出处所有,转载只为让更多人看到这部优秀作品合集,如果侵权,请留言告知 Twisted Introduction This mu ...

  8. python--numpy学习(一)

    NumPy 部分功能如下: ndarray,一个具有矢量运算符和复杂广播能力的快速节省空间的多维数组 用于对数组数据进行快速运算的标准数学函数 用于读写磁盘数据的工具以及用于操作内存映射文件的工具 线 ...

  9. vue 构建前端项目并关联github

    这几天尝试用node开发一个网站,后端的接口已经初步开发完成,现在开始构建前端的项目,记录下过程,在学习下吧. 用vue-cli 构建项目,myproject.(构架过程略过) 每次在本地构建项目后和 ...

  10. 通过键盘上下键 JS事件,控制候选词的选择项

    效果图 JS代码 //上下键 选择事件 searchBackgroud 为样式,只做标记,无实质样式,因为和其他样式不兼容,只能添加CSS $(document).keydown(function ( ...