8

处理或多/少像电子表格一样操作的 HTML 控件 - 带有可编辑数据单元格的矩阵。When it comes to cells derived from a SELECT I'm having an issue getting the correct behavior when that type of cell is selected for edit:

如果我使用其默认格式（大小 = 0）呈现 Select，则用户将获得 Select 的 Enter 键处理的不适当行为：

  • 第一次 Enter => 激活单元格上的编辑（显示选择控件）
  • 第二次 Enter => 展开选择以显示选项
  • 用户使用 up/dn 键进行选择
  • 第三次 Enter => 关闭列表。（问题：此 Enter 对“keydown”事件处理程序隐藏）
  • 第 4 次 Enter => 需要触发事件侦听器以停用单元格编辑。

另一方面，如果选择呈现为列表框（例如，大小 = 3），则 Enter 键行为正是我正在寻找的（意思是，上面列表中的 #2 和 #3 不再必需），但是因为列表现在显示在控件内部（而不是作为弹出窗口），它会放大单元格/行的大小。

那么，有没有办法“挂钩”到上面的第三个 Enter 键事件，或者在处理 Enter 键时改变 Select 的行为的其他一些相对直接的方法？

注意：我们没有使用任何 3rd 方库（阅读：jQuery 等）

编辑：这是事件监听器（通过典型的“addEventListener（...）”附加

this.e_sKeyDown = function(control, event) {
  switch(event.keyCode) {
    case 13:  // enter
      control.blur()
      break
    case 27:  // esc = reset selection to it previous value
      control.setAttribute("data-cancelModify", "true")
      control.blur()
      break
  }
}

第二次编辑：根据评论/建议，我已经添加/尝试过：

this.e_sOnChange = function(control, event) {
  control.blur()
}

该事件将触发，但它会针对每个不同的 Option/s 触发。换句话说，我似乎没有任何方法可以确定这是用户实际打算选择的选项，还是只是沿途遍历的选项。为了演示，这里是 jquery 站点的任何示例。请注意文本如何随每次上/下而变化，无论 Enter 键如何：

http://api.jquery.com/change/

已解决：感谢所有评论者的建议。事实上，解决方案（无论如何对于我的情况）是在混合中添加一个“keyup”事件监听器。我不能说这将在哪些浏览器中运行，但它在更高版本的 Chrome 中是可用的。

4

1 回答 1

2

根据建议，获取“隐藏” Enter-key 事件的方法是添加“keyup”事件侦听器；问题已被编辑以反映解决方案。

注意：这个答案只是为了结束这个问题而发布的；请在应有的地方给予信任 - jesus.tesh 和其他评论者的建议......

于 2013-08-12T13:53:02.360 回答