为什么input元素中keydown事件的修饰键状态存在延迟？

问题描述 #

我实现了一个功能：用户按下Shift + Alt时会显示带访问键的标签。
最初我用如下代码做判断：

evt.altKey && evt.shiftKey && 
  (evt.key == Shift || evt.key == Meta)

我发现该逻辑至少在部分input字段中不生效，因为shiftKey和altKey要到之后的下一次按键触发时才会被赋值。它在input type="range"上可以正常运行，但在type="number"或者普通文本类input上无法生效。
修复方案很简单，但我好奇出现该现象的原因：

• 这属于未定义行为吗（即表现可以任意）？
• 有没有相关规范对该行为做了明确定义？

我的使用环境是Linux系统下的Firefox Developer Edition 93.0b9（64位）。

补充：按下Alt键时事件的key值为"Meta"，但会设置altKey而非metaKey；按下Meta键（Windows键）时key值为"OS"且metaKey不会被设置，这属于另一个问题，其中metaKey未设置的情况已有公开文档说明。

测试示例 #

以下是可运行的简单测试用例：

测试代码 #

const can = document.getElementById('can');
const show = e => {
  let k = [];
  if (e.shiftKey)
    k.push('Shift');
  if (e.altKey)
    k.push('Alt');
  can.textContent = 
    'modifiers(' + k.join(' + ') + ') key: ' + e.key;
};
window.addEventListener('keydown', show);

:focus {
  outline: 1px solid red;
}

<p id="can">&nbsp;</p>
<button>Dummy</button>
<input />

测试分组 #

• 测试1：焦点位于按钮（或文档空白处）
• 测试2：焦点位于input输入框

统一按键步骤 #

1. 按下并保持按住Shift
2. 按下并保持按住Alt
3. 按下并松开A
4. 按下并松开X
5. 松开Shift和Alt

测试结果 #

测试1 #

1. modifiers(Shift) key: Shift
2. modifiers(Shift + Alt) key: Meta
3. modifiers(Shift + Alt) key: A
4. modifiers(Shift + Alt) key: X

测试2 #

1. modifiers() key: Shift
2. modifiers(Shift) key: Meta
3. modifiers(Shift + Alt) key: A
4. modifiers(Shift + Alt) key: X

内容的提问来源于stack exchange，提问作者Turmund