说一说input里面的事件

最新推荐文章于 2023-11-01 17:59:04 发布

qq_32798243

最新推荐文章于 2023-11-01 17:59:04 发布

阅读量2k

点赞数

分类专栏：前端 HTML5

本文链接：https://blog.csdn.net/qq_32798243/article/details/79651244

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

HTML5

1 篇文章 0 订阅

订阅专栏

在们都知道的input事件中有focus，blur，change, keydown, keyup,html5中新加入的input事件,前端工程师总是免不了和输入框打交道监听用户的输入并发送给服务端。

首先事件发生的顺序如下：focus->keydown->input->keyup->change->blur.

因为阅读了这位仁兄的输入事件解析发现很全面https://blog.csdn.net/yiifaa/article/details/52372022，所以我就加上一点自己的补充吧。

首先我也是使用了这位仁兄的代码然后补充了一个事件select。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    input{
      width: 500px;
      height: 200px;
      border: 1px solid green;
    }
  </style>
</head>
<body>
<input type="text" id="user">
<script>
  var username = document.getElementById('user');
  var result = [];
  username.addEventListener("focus", function(event) {
    result.push({
      event  : 'focus',
      value  : this.value,
      keyCode : event.keyCode
    });
  })
  username.addEventListener("select", function(event) {
    result.push({
      event  : 'select',
      value  : this.value,
      keyCode : event.keyCode
    });
    console.table(result);
  })
  username.addEventListener("input", function(event) {
    result.push({
      event  : 'input',
      value  : this.value,
      keyCode : event.keyCode
    });
    console.table(result);
  })
  //  注册keydown事件
  username.addEventListener("keydown", function(event) {
    result.push({
      event  : 'keydown',
      value  : this.value,
      keyCode : event.keyCode
    });
    console.table(result);
  });
  //  注册keyup事件
  username.addEventListener("keyup", function(event) {
    result.push({
      event  : 'keyup',
      value  : this.value,
      keyCode : event.keyCode
    });
    console.table(result);
  });
  //  注册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) {
    console.log('blur')
    result.push({
      event  : 'blur',
      value  : this.value,
      keyCode : event.keyCode
    });
    //  输出结果
    console.table(result);
  })
</script>
</body>
</html>

我就做了一次聚焦输入失去焦点结果就是我说的也是哪位仁兄总结的，然后我接着说仁兄的总结里面就是change事件一定是在blur时候发生但是呢如果和之前的值没变化就不会触发change事件。补充的就是

在我们需要决定用户输入的一定是可用的字符就是不是shift, 大写键，回车键，上下左右方向键的时候就没有办法依靠keyup事件来监听，因为keyup和keydown只要有输入就会触发，可是当我点击大写输入键的时候发现，不会执行input事件，所以一个需求是用户输入不必要的键子，还有复制粘贴过来的值就不会调用 keyup keydown这样的话就会发现只发生了变化可是检测不到，那我们的小可爱input就派上了用场只要值发生了变化就会执行这个事件，所以前端监听值的变化使用input事件果然666, 但是这个事件没法得到keycode。缺点吧，但是开发中建议使用input监听输入的变化。

同时补充一个事件onselect 当input里的内容文本被选中后执行一段，只要选择了就会触发。

qq_32798243

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
说一说input里面的事件

在们都知道的input事件中有focus，blur，change, keydown, keyup,html5中新加入的input事件,前端工程师总是免不了和输入框打交道监听用户的输入并发送给服务端。首先事件发生的顺序如下：focus-&gt;keydown-&gt;input-&gt;keyup-&gt;change-&gt;blur.因为阅读了这位仁兄的输入事件解析发现很全面https://bl...
复制链接

扫一扫