keydownkeyup 属于键盘事件,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. ORACLE系统表大全

    下面全面是对Oracle系统表的一些介绍: 数据字典dict总是属于Oracle用户sys的. 1.用户: select username from dba_users; 改口令 alter user ...

  2. gerrit简版教程

    设置public key 1.生成密钥:ssh-keygen -t rsa -C "xiaoming" 2.查看是否已经有了ssh密钥:cd ~/.ssh 3.不知道为什么hook ...

  3. php与JAVA的RSA加密互通

    Java 版本RSA 进行加密解密 在网上查询了好几天,最终找到解决方案,网络上都是通过Cipher.getInstance("RSA"); 而改成Cipher.getInstan ...

  4. laravel 网站速率优化

    https://segmentfault.com/a/1190000009954966

  5. TCP,你懂的

    TCP(Transmission Control Protocol 传输控制协议)是一种面向连接(连接导向)的.可靠的. 基于IP的传输层协议.TCP在IP报文的协议号是6.TCP是一个超级麻烦的协议 ...

  6. spring bean id重复覆盖的问题解决

    问题: 当我们的web应用做成一个大项目之后,里面有很多的bean配置,如果两个bean的配置id是一样的而且实现类也是一样的,例如有下面两份xml的配置文档: beancontext1.xml &l ...

  7. org.apache.hadoop.security.AccessControlException: Permissiondenied: user=liuyingping, access=WRITE,inode="/user/root/output":root:supergroup:drwxr-xr-x

    原因: 权限问题.用户liuyingping没有访问hdfs下文件的权限. 参考:HDFS客户端的权限错误:Permission denied 解决方案(推荐): 在系统的环境变量添加HADOOP_U ...

  8. 命令提示符(cmd)中的tracert命令详解(小技巧)

    tracert也被称为Windows路由跟踪实用程序,在命令提示符(cmd)中使用tracert命令可以用于确定IP数据包访问目标时所选择的路径.本文主要探讨了tracert命令的各个功能. 百度经验 ...

  9. win7重新安装后删除文件权限不够(小技巧)

    选择文件,安全,编辑,如果用户权限可以编辑,那么赋予提示的用户权限. 如果此时用户不可编辑,那先把所属用户换了,安全,高级,所有者,更换所有者之后,权限就可以编辑了.

  10. 微信小程序之wx.getLocation再次授权问题解决

    首先,在page外定义一个公共函数用于发送获取位置的请求 var getLocation = function (that) { wx.getLocation({ type: 'wgs84', suc ...