KeyEvents与输入抖动问题

栏目: 后端 · 前端 · 发布时间: 5年前

内容简介：在积木中输入框会根据已输入字符的长度更新输入框的长度，输入框其实是一个 input，盖在了 SVG 之上，并根据 SVG 的长度计算最新长度并更新：

输入框的长度会随着已输入字符长度变化，为什么会出现抖动？
为什么 scratch 的键盘事件要绑成这样子？

KeyEvents与输入抖动问题

输入抖动问题

在积木中输入框会根据已输入字符的长度更新输入框的长度，输入框其实是一个 input，盖在了 SVG 之上，并根据 SVG 的长度计算最新长度并更新：

KeyEvents与输入抖动问题

但最近发现个问题，由于 input 的 CSS 属性是 text-align: center; ，值改变之后再更新长度居中，视觉上会出现先往左，再居中的“抖一下”效果。

通过观察样式更新的方法，发现更改宽度的方法比值更改的方法慢了 100ms 左右的时间触发，查看了一下更改宽度的方法绑在了 keyup 事件之上，而 keyup 事件的触发比真正改变输入框值的方法要慢很多，远远大于 16ms 的人眼无法察觉的视觉变化时间，那输入框改变值之后触发的第一个方法是什么呢？

key-evnets

W3C 中对键盘事件的【定义】： https://w3c.github.io/uievents/#event-type-keydown

做个小 DEMO 来实验一下，对 input 框绑定了 keydown 、 keyup 、 keypress 、 input 事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Key-Events</title>
</head>
<body>
  <input id="input" type="text">
  <script>
    const input = document.querySelector('input');
    input.addEventListener('keydown', (e) => {
      console.log('keydown', e.target.value);
    });
    input.addEventListener('keyup', (e) => {
      console.log('keyup', e.target.value);
    });
    input.addEventListener('keypress', (e) => {
      console.log('keypress', e.target.value);
    });
    input.addEventListener('input', (e) => {
      console.log('input', e.target.value);
    });
  </script>
</body>
</html>

短按一下

KeyEvents与输入抖动问题

触发的顺序是：keydown => keypress => input => keyup
注意：keydown、keypress 钩子触发的时候，还是没有赋值的，真正赋值是在 input 之后

长按

KeyEvents与输入抖动问题

触发循序是：keydown => keypress => input => keydown(n) => keyup
注意：长按的表现是在 input 之后插入 n 个 keydown 直至手放开后触发 keyup

不同键盘的表现

测试了不同的键盘包括 MBP 的自带键盘，机械键盘，长按的表现还是不一样的，不过和本问题无关，先留意这个点，日后有相关的问题查阅 W3C 的【规定】进行解决。

总结

对于实时性要求高的输入事件例如根据输入改变输入框宽度的场景，把事件绑定在 input 上，因为 keyup 的延时时间会让人有抖动的感觉
对于键盘事件要了解短按、长按的不同表现区别，最好的方法是去 W3C 查阅【规定】，一般浏览器厂商或是硬件厂商都会尽可能的遵守这个【规定】

以上所述就是小编给大家介绍的《KeyEvents与输入抖动问题》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Ruby on Rails敏捷开发最佳实践

李刚 / 电子工业出版社 / 2008-4 / 79.80元

《Ruby on Rails敏捷开发最佳实践》适用于正在使用Ruby On Rails进行应用开发的开发人员、渴望了解Ruby On Rails框架的开发人员，尤其适合有初步的Java EE开发经验，想从Java EE平台过渡到Ruby On Rails开发平台的开发者。 Ruby On Rails框架一经推出，立即引起B/S结构应用开发领域革命性的变化：开发者无需理会架构，只需要按Rail......一起来看看《Ruby on Rails敏捷开发最佳实践》这本书的介绍吧!

码农工具