输入框事件监听(一):keydown、keyup、input

原创 2016年08月30日 18:44:42

当输入框的值发生变化时,我们可以通过keydown、keyup、input、onchange、blur事件观察到其值的变化,但它们的应用时机与应用场景存在显著的差异。

1. 实时观察

需要观察到用户每次键盘输入的变化,必须要用keydown、keyup与input,onchange与blur无效。在这其中,keyup与input都能及时获取到用户输入的全值,而keydown不会将当前的键值计入到输入框的值中,示例如下:

//  假定页面存在如下元素
//  <input type="text" id="username">
//  注册input事件
username.addEventListener("input", function(event) {
    result.push({
        event  : 'input',
        value  : this.value,
        keyCode : event.keyCode
    });
})
//  注册keydown事件
username.addEventListener("keydown", function(event) {
    result.push({
        event  : 'keydown',
        value  : this.value,
        keyCode : event.keyCode
    });
});
//  注册keyup事件
username.addEventListener("keyup", function(event) {
    result.push({
        event  : 'keyup',
        value  : this.value,
        keyCode : event.keyCode
    });
});
//  注册change事件
username.addEventListener("change", function(event) {
    result.push({
        event  : 'change',
        value  : this.value,
        keyCode : event.keyCode
    });
    //  输出结果
    console.table(result);
});
//  注册blur事件
username.addEventListener("blur", function(event) {
    result.push({
        event  : 'blur',
        value  : this.value,
        keyCode : event.keyCode
    });
    //  输出结果
    console.table(result);
})

聚焦到输入框中,依次输入“abc”,最后控制台的输出结果如下图所示。
事件输出结果
从图中可以看出如下结论:
1. keydown事件发生时,输入值并没有发生变化,所以keydown可用于阻止某些输入字符的显示。
2. input事件发生时,无法获取到keyCode值,并且紧随在keydown事件之后。
3. keyup事件最后发生,一次键盘敲入事件彻底完成。
4. change事件只会发生在输入完成后,也就是输入框失去焦点之前。

2. 输入完成后观察

当用户完成所有的输入时,这时候必定会发生blur事件,只有这时才会触发change,所以可用blur与change监听用户输入是否完成,输入框的验证多半发生在此时。

3. 输入事件流

输入框发生的事件流程依次为focus、keydown、input、keyup、change与blur,见下图所示。
               输入事件流

版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

文本框输入后立即触发事件

文本框输入事件:onchange 、onkeyup 、onblur onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会...

输入框事件监听(二):中文输入与229

继续之前的例子,我们在文本框中输入“中文”两个汉字,并且每个汉字都确认一次,最后事件监听的输出结果如下图所示。 从这张图中我们发现如下问题: 1. 在中文输入法下,keydown监听到的键值都是2...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

keyup按键事件的应用

实例1:在文本框内任意按下一个按键,改变文本框的颜色 $(document).ready(function(){   $("input").keydown(function(){ ...

jQuery中利用keyup事件和判断是否为汉字来实现动态搜索

需求:有时候在做界面搜索功能的时候,会想要根据用户输入的汉字来检索出相应的内容。要求是动态的检索,用户每次输入一个字或一个词就会进行关键字模糊搜索。

SSM框架——详细整合教程(Spring+SpringMVC+MyBatis)

使用SSM(Spring、SpringMVC和Mybatis)已经有三个多月了,项目在技术上已经没有什么难点了,基于现有的技术就可以实现想要的功能,当然肯定有很多可以改进的地方。之前没有记录SSM整合...

jQuery 事件 - keyup() 方法及文本框只输入数字

keyup(),keydown方法     一、定义和用法:完整key press过程分为两个部分,按键被按下,然后按键被松开并复位;                     &#...

事件文本框键盘事件keydown,keypress,keyup区别

文章结束给大家来个程序员笑话:[M]     按下键盘时会触发键盘事件,次序为keydown -> keypress ->keyup。     1、keydown、keypress事件触发在文字还...

js 实时监听input中值变化

RunJS 实时监测input中值的变化

移动端(html5)微信公众号下用keyup实时监控input值的变化无效

项目中有一处需求是,搜索框依据用户输入的值实时检索,一开始自然而然想到keyup,在拼音状态时,啥问题也没有,后来切换到中文输入法,问题出来了,不灵便了,后来在网上搜了下,找到了思路,主要是给搜索框注...

jQuery给input绑定回车事件

$(function(){ $('#dataInput').bind('keypress',function(event){ if(event.keyCod...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)