重写Enter键的SELECT行为

Overriding SELECT behavior of Enter key

本文关键字:行为 SELECT 键的 Enter 重写      更新时间:2023-09-26

使用一个HTML控件,该控件的操作或多或少像一个电子表格,具有可编辑数据单元格矩阵。当涉及到从SELECT派生的单元格时,当选择该类型的单元格进行编辑时,我无法获得正确的行为:

如果我使用默认格式(size=0)呈现Select,则用户会得到Select的Enter键处理的不适当行为:

  • 第一次输入=>激活单元格上的编辑(显示选择控件)
  • 第二次输入=>展开选择以显示选项
  • 用户使用up/dn键进行选择
  • 3rd Enter=>关闭列表。(问题:此Enter在"keydown"事件处理程序中隐藏)
  • 4th输入=>需要触发事件侦听器以停用单元格编辑

另一方面,如果选择被呈现为列表框(例如,size=3),则Enter键行为正是我想要的(也就是说,不再需要上面列表中的#2和#3),但因为列表现在显示在控件内部(而不是弹出窗口),它会破坏单元格/行的大小。

那么,在处理Enter键时,有没有一种方法可以"挂钩"到上面的第三个Enter键事件中,或者其他一些相对直接的方法来改变Select的行为?

注意:我们没有使用任何第三方库(阅读:jQuery等)

EDIT:这是事件监听器(通过典型的"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()
}

该事件将触发,但它会为每个不同的选项触发。换句话说,我似乎无法确定这是用户实际想要选择的选项,还是一路上遍历的选项。为了进行演示,下面是jquery网站的任何示例。注意文本是如何随着每个向上/向下而变化的,而不考虑输入键:

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

解决:感谢所有的评论者的建议。事实上,解决方案(无论如何,对于我的情况)是在混合中添加一个"keyup"事件侦听器。我不能说这将在什么浏览器中工作,但它在Chrome的后期版本中是可用的。

根据建议,拾取"隐藏"Enter键事件的方法是添加一个"keyup"事件侦听器;问题经过编辑以反映解决方案。

注意:发布此答案只是为了结束问题;请在应该表扬的地方给予表扬-jesus.tesh和其他评论者的建议。。。