内容简介：在积木中输入框会根据已输入字符的长度更新输入框的长度，输入框其实是一个 input，盖在了 SVG 之上，并根据 SVG 的长度计算最新长度并更新：
- 输入框的长度会随着已输入字符长度变化，为什么会出现抖动？
- 为什么 scratch 的键盘事件要绑成这样子？
输入抖动问题
在积木中输入框会根据已输入字符的长度更新输入框的长度，输入框其实是一个 input，盖在了 SVG 之上，并根据 SVG 的长度计算最新长度并更新：
但最近发现个问题，由于 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>
短按一下
- 触发的顺序是：keydown => keypress => input => keyup
- 注意：keydown、keypress 钩子触发的时候，还是没有赋值的，真正赋值是在 input 之后
长按
- 触发循序是：keydown => keypress => input => keydown(n) => keyup
- 注意：长按的表现是在 input 之后插入 n 个 keydown 直至手放开后触发 keyup
不同键盘的表现
测试了不同的键盘包括 MBP 的自带键盘，机械键盘，长按的表现还是不一样的，不过和本问题无关，先留意这个点，日后有相关的问题查阅 W3C 的【规定】进行解决。
总结
- 对于实时性要求高的输入事件例如根据输入改变输入框宽度的场景，把事件绑定在 input 上，因为 keyup 的延时时间会让人有抖动的感觉
- 对于键盘事件要了解短按、长按的不同表现区别，最好的方法是去 W3C 查阅【规定】，一般浏览器厂商或是硬件厂商都会尽可能的遵守这个【规定】
以上所述就是小编给大家介绍的《KeyEvents与输入抖动问题》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- 从源码分析TabBar的文字抖动问题
- 应付网络抖动等临时故障的重试策略
- 服务重启导致的Java服务抖动CPU占用高
- 【拒绝一问就懵】之没听说过内存抖动吧
- WebRTC视频数据统计之延时、抖动与丢包
- 详读webrtc的视频统计信息之延迟、抖动与丢包
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
JavaScript & jQuery
David Sawyer McFarland / O Reilly / 2011-10-28 / USD 39.99
You don't need programming experience to add interactive and visual effects to your web pages with JavaScript. This Missing Manual shows you how the jQuery library makes JavaScript programming fun, ea......一起来看看 《JavaScript & jQuery》 这本书的介绍吧!
