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. throw、try 和 catch

    try 语句允许我们定义在执行时进行错误测试的代码块. catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块. JavaScript 语句 try 和 catch 是成对出现的. ...

  2. fn project 打包Function

      Option 1 (recommended): Use the fn cli tool We recommend using the fn cli tool which will handle a ...

  3. 如何配置数据库ODBC数据源

    在<调整计算机的设置>中,点击<系统和安全>.   点击<管理工具>.   点击<数据源(ODBC)>.   点击<系统用户>,然后,点击按 ...

  4. java代码=--数组复制

    总结:arraycopy注意数组定义的长度.不足会补0 package clientFrame; //数组的复制arraycopy() public class Xiang { public stat ...

  5. java代码逆序输出再连篇

    总结:思维方式关键 package com.dfd; import java.util.Scanner; //逆序输出数字 public class fdad { public static void ...

  6. mysql实战优化之三:表优化

    对于大多数的数据库引擎来说,硬盘操作可能是最重大的瓶颈.所以,把你的数据变得紧凑会对这种情况非常有帮助,因为这减少了对硬盘的访问. 如果一个表只会有几列罢了(比如说字典表,配置表),那么,我们就没有理 ...

  7. 1111 Online Map

    题意:给定一个图,以及起点和终点,需要我们计算两条路径.第1条路径:距离最短路径,若不唯一,则选择用时最短的那一条:第2条路径:用时最少路径,若不唯一,选择经过结点数最少的那一条. 思路:两次Dijk ...

  8. python学习(六) 抽象

    6.1 懒惰即美德 斐波那契数列: >>> fabs = [0, 1]>>> for i in range(8): fabs.append(fabs[-1] + f ...

  9. Java Web发布

    记得开始学习Java Web的时候,首先用的是Eclipse开发,但是有一个问题始终没有弄明白,做好的Web项目是如何发布到Tomcat服务器上的呢?最后得到了一个结论,那就是Eclipse这个软件可 ...

  10. 笔记:Tid设计思维

    Tid设计思维 2017年7月19日TiD大会创新设计论坛 一.     设计思维实践: 为什么他能觉察你看不到的机会 1.    原因一:[觉察]与[看] 他(们)能“觉察”你“看”不到的机会,他们 ...