输入框事件监听(一):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)时才会...
  • meizhiyun
  • meizhiyun
  • 2013年11月27日 12:14
  • 95849

input 输入完成时执行的事件change事件

$("#code_num").change(function(){});
  • u012493556
  • u012493556
  • 2016年09月29日 17:27
  • 4690

Input Events(输入事件)

在安卓中,有不止一种方法从你的应用截取用户交互事件。在你的用户界面中考虑事件,途径就是从用户界面中的一个指定的view对象中捕获事件。该view提供了这样做的方法。 在你用来组成你布局的不同的v...
  • yh_android_blog
  • yh_android_blog
  • 2016年07月23日 15:30
  • 895

总结oninput、onchange与onpropertychange事件的用法和区别

前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数。过去一般都使用onchange/onkeyup/onkeypress/onke...
  • freshlover
  • freshlover
  • 2014年09月04日 12:36
  • 73888

input 输入框两种改变事件的方式

一、在输入框内容变化的时候不会触发,当鼠标在其他地方点一下才会触发 $('input[name=myInput]').change(function() { ... });   二、...
  • xxwd12
  • xxwd12
  • 2017年07月18日 10:08
  • 682

jquery input change事件

input输入框的change事件,要在input失去焦点的时候才会触发 $('input[name=myInput]').change(function() { ... }); 在输入框内容变化的...
  • arkblue
  • arkblue
  • 2014年01月09日 13:51
  • 144357

移动端keyup事件

最近在做一个项目需求,需要实现一个类似谷歌搜索的功能,可以模糊匹配到中文和字母。当时想到了keyup事件,每当键盘按下时监控input框值的变化,在电脑和安桌手机上测试都没有问题。直接提交完系统测试,...
  • donggx
  • donggx
  • 2016年11月15日 16:55
  • 2886

vue绑定keyup,input事件

项目里有个需求,在文本框textarea输入框输入数据时校验剩余的字数,只用keyup事件不能很好的达到效果,因此采用input事件和keyup事件结合的方式,可以实现动态输入及时获取输入字数的需求 ...
  • sonlife
  • sonlife
  • 2017年01月18日 15:38
  • 9757

如何使keyup事件延迟处理

一般情况是每点击一个按键都会触发一次keyup事件,但是有些时候,这样并不能满足要求,需要的是输入完毕之后才执行某函数。(比如通过扫码枪扫描图书条形码进行图书信息的录入)这里只能采取延时执行的方法来处...
  • qq_30152271
  • qq_30152271
  • 2016年09月14日 11:11
  • 2092

有关input输入框内容改变后的触发事件

有关input输入框内容改变后的触发事件,也是今天遇到的问题。我使用时间插件为输入框填充内容,想实现输入框内容改变后执行相应的方法,发现使用change方法没有反应。百度了半天,最后才发现问题所在。我...
  • yyc13579
  • yyc13579
  • 2017年08月02日 22:05
  • 3150
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:输入框事件监听(一):keydown、keyup、input
举报原因:
原因补充:

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