html 列表值按关键事件更改

Question

开始Order游戏后，将游戏等级从1级改为2级。使用向左箭头键，列表的当前值从 2 变为 1。我怎样才能避免这种变化？

游戏中使用键箭头（键事件）来移动方块。 select 元素（级别）用于更改板的大小。当用户更改级别并单击新按钮时，按键事件不会影响级别。但是，如果用户更改级别（例如，从 2 到 1）然后使用键箭头（例如，左箭头键），则级别会更改（从 2 到 1）。我想禁用该更改。

我使用失败

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

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

Answer 1

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

您尝试将 disabled 设置为 false 并返回 true 可能会使用 Futures 以允许浏览器处理状态更改。

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

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

html list value changes by key events