keydown、input、keyup

最新推荐文章于 2022-08-25 01:39:28 发布

hkwBest

最新推荐文章于 2022-08-25 01:39:28 发布

阅读量1.5k

点赞数

分类专栏： js 文章标签： keydown input keyup change blur

本文链接：https://blog.csdn.net/hkwBest/article/details/89142055

版权

js 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

我们常常需要通过监听输入框的keydown、input、keyup、change、blur事件来操作输入内容，所以他们的差异就不得不了解。先来看一个实验案例：

<body>
  <input id='user' type="text" />
</body>
<script>
  var user = document.getElementById('user');
  var res = [];
  user.onkeyup = function(event){
    res.push({
      event: 'keyup',
      value: this.value,
      keyCode: event.keyCode
    })
  }
  user.onkeydown = function(event){
    res.push({
      event: 'keydown',
      value: this.value,
      keyCode: event.keyCode
    })
  }
  user.oninput = function(event){
    res.push({
      event: 'input',
      value: this.value,
      keyCode: event.keyCode
    })
  }
  user.onchange = function(event){
    res.push({
      event: 'change',
      value: this.value,
      keyCode: event.keyCode
    })
    console.log('change-------------');
    console.table(res)
  }
  user.onblur = function(event){
    res.push({
      event: 'blur',
      value: this.value,
      keyCode: event.keyCode
    })
    console.log('blur-------------');
    console.table(res)
  }

输入英文 ‘ab’ 结果如下图：
在这里插入图片描述

可以看出触发事件的顺序依次为 keydown -> input -> keyup -> change -> blur

keydown总是不能准确的拿到输入框的value
input总是能准确的拿到输入框的value，但是不能拿到keyCode
keyup总是能准确的拿到输入框的value，也能拿到当前输入的keyCode

注意：当输入完毕敲回车键后能触发change事件但不能触发blur事件，只有把光标从输入框移除后才能触发blur事件

输入汉字 ‘啊’ 结果如下图：
在这里插入图片描述
可以看出触发事件的顺序大致和输入英文保持一致，但也不完全相同。

keydown仍然总是不能准确的拿到输入框的value
input仍然总是能准确的拿到输入框的value，但是不能拿到keyCode
keyup变得不总是能准确的拿到输入框的value

注意：输入汉字的时候我们没有谈论keyCode，因为它变得有些诡异，甚至会因此导致一些处理不慎的错误。

hkwBest

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
keydown、input、keyup

我们常常需要通过监听输入框的keydown、input、keyup、change、blur事件来操作输入内容，所以他们的差异就不得不了解。先来看一个实验案例：<body> <input id='user' type="text" /></body><script> var user = document.getElementById('...
复制链接

扫一扫

专栏目录