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. phpredis的使用

    phpredis的具体使用方法可以参照:https://github.com/phpredis/phpredis

  2. 无敌JS关闭当前窗口代码,不弹出确认提示

    echo "<script type='text/javascript'>window.opener=null;window.open('','_self');window.cl ...

  3. bzoj 4671 异或图——容斥+斯特林反演+线性基

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4671 考虑计算不是连通图的方案,乘上容斥系数来进行容斥. 可以枚举子集划分(复杂度是O(Be ...

  4. Oracle中的存储过程简单例子

    --创建表create table TESTTABLE(  id1  VARCHAR2(12),  name VARCHAR2(32))select t.id1,t.name from TESTTAB ...

  5. Java-Maven-Runoob:Maven Eclipse

    ylbtech-Java-Maven-Runoob:Maven Eclipse 1.返回顶部 1. Maven Eclipse Eclipse 提供了一个很好的插件 m2eclipse ,该插件能将 ...

  6. Oracle sqlldr数据加载

    1 sqlldr 传统路径:sqlldr会利用sql插入为我们加载数据 直接路径加载:sqlldr不适用sql,直接格式化数据块,绕开undo,避开redo,最快的方法就是并行直接路径加载 sqlld ...

  7. 获取Request.Form所有内容

    string wwww = "";        for (int i = 0; i < Request.Form.Count; i++)        {          ...

  8. 一个简单的Python多线程

    首先对一段普通的代码进行测试 # -*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR" import time def RunThrea ...

  9. sourceTree免密码校验

    1.ssh请求:参考:http://www.ithao123.cn/content-1584888.html 步骤1:检查你的电脑上是否已经生成了SSH Key 在git bash下执行如下命令 cd ...

  10. 小程序二维码生成接口API

    获取小程序码 我们推荐生成并使用小程序码,它具有更好的辨识度.目前有两个接口可以生成小程序码,开发者可以根据自己的需要选择合适的接口. 接口A: 适用于需要的码数量较少的业务场景 接口地址: http ...