dom - html列表值因按键事件而改变

Question

启动Order游戏后，将游戏级别从1更改为2。
使用左箭头键，列表的当前值从2到1。
如何避免这种变化？

游戏中使用键箭头(键事件)移动图块。选择元素(级别)用于更改电路板的尺寸。
当用户更改级别并单击新按钮时，按键事件不会影响级别。但是，如果用户将级别(例如，从2更改为1)，然后使用按键箭头(例如，向左箭头键)，则级别将更改(从2变为1)。我想禁用该更改。

我使用不成功

document.onKeyDown.listen((KeyboardEvent event) {
  levelSelect.disabled = true;
  ...
  levelSelect.disabled = false;
}); 

在lib / view / board.dart文件的Board类中。

Source code

Answer 1

当您单击select元素以更改值时，select元素将获得焦点(并将其从页面加载后的body元素中移开)。结果是select元素处理键事件，而不是您注册自定义键事件处理程序的文档。

您尝试将disabled设置为false并重新设置为true可能会与使用Futures一起使用，以允许浏览器处理状态更改。

一个更简单的解决方案是使用blur()方法使select元素将焦点从自身移开:

levelSelect.onChange.listen((Event e) {
  levelSelect.blur();
  level = int.parse(levelSelect.value);
});