输入框事件监听(一):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,见下图所示。
               输入事件流

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

相关文章推荐

在Eclipse中配置DOS(cmd)窗口

1、新建一个扩展名为“txt”的文件,里面输入如下内容:“start cmd.exe”;然后将其关闭并修改其扩展名为“bat”,修改文件名为“cmd”;2、点击如下菜单:3、当点击“External ...

java中sftp文件上传与下载

Java中使用sftp进行文件上传与下载最近项目中使用sftp进行文件上传与下载,特意写一篇文章用来作为例子参考: 注:项目的pom文件里面需要加上依赖包: com.jcra...

HTML 输入框input事件监听实例

监听输入框值的即时变化 onpropertychange oninput function immediately(){ var element = document.getElementBy...
  • ziyeH2
  • ziyeH2
  • 2013年06月13日 15:15
  • 3558

js监听input等表单输入框的变化事件oninput

js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变...

类似百度输入框自动联想功能遇到的问题:Opera浏览器不支持拼音输入法时的keyup事件

这个问题也许很多人都遇到过了,在百度能搜到很多遇到相同问题的人,但解决办法都是一个(下面是载自其他网页): 【 问题ZcT345站长站 在开启输入法的情况下,三个浏览器的具体问题如下:ZcT34...

jQuery -- 监听input、textarea输入框值变化

使用ionic中ng-change可以监听input的框值变化,但是如果为textarea的话,就没有使用ng-change的事件了,所以在这介绍一个两者兼得的方法: 实时监听输入框值变化的事件:o...

如何实时监听 input 和 textarea输入框值的变化

在实际前端开发中我们经常会遇到要实时监听用户的输入,根据不同的输入值来采取不同的措施。举一个常见的例子:我们在使用Google 搜索框进行搜索时,每多输入一个字,搜索框下方显示的匹配结果会实时变化。这...

DataGridView在Cell编辑状态响应回车键下的KeyPress/KeyDown/KeyUp事件

我们知道由于DataGridView的单元格DataGridCell处于编辑的时候,当你按Enter键,那么DataGridView是不会激发KewPress/KeyDown/KeyUp这些事件的,因...

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

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

jquery事件 【mousedown与mouseup ----keydown与keypress与keyup】focus--blur--orrer--pageX-pageY

// $(function () { // mousedown 鼠标按下 $("#btn1").mou...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:输入框事件监听(一):keydown、keyup、input
举报原因:
原因补充:

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