内容简介：在积木中输入框会根据已输入字符的长度更新输入框的长度，输入框其实是一个 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的视频统计信息之延迟、抖动与丢包
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
