覆盖Enter键的SELECT行为

mjk*_*mjk 8 javascript select

使用HTML控件(或多或少像电子表格一样操作) - 使用可编辑数据单元矩阵.当涉及从SELECT派生的单元格时,我在选择该类型的单元格进行编辑时遇到问题时会遇到问题:

如果我使用其默认格式(size = 0)呈现Select,则用户将获得Select的Enter-key处理的不正常行为:

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

另一方面,如果select被呈现为列表框(例如,size = 3),则Enter键行为正是我正在寻找的(意思是,上面列表中的#2和#3不再是但是因为列表现在显示在控件的内部(而不是弹出窗口),它会炸掉单元格/行大小.

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

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

编辑:这是事件监听器(通过典型的"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
  }
}
Run Code Online (Sandbox Code Playgroud)

第二次编辑:根据意见/建议,我已经添加/给出了这个尝试:

this.e_sOnChange = function(control, event) {
  control.blur()
}
Run Code Online (Sandbox Code Playgroud)

该事件将触发,但它会触发每个不同的Option/s.换句话说,似乎我没有任何方法可以确定这是用户实际打算选择的选项,还是只是沿途遍历的选项.为了演示,这里是jquery网站的任何示例.注意文本如何随每个向上/向下更改,无论Enter键如何:

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

解决:感谢所有评论者的建议.实际上,解决方案(无论如何我的情况)是在混合中添加一个"keyup"事件监听器.我不能说这将适用于哪些浏览器,但它在更高版本的Chrome中可用.

mjk*_*mjk 2

根据建议,获取“隐藏”回车键事件的方法是添加一个“keyup”事件侦听器;问题已被编辑以反映解决方案。

注意:此答案只是为了结束问题而发布的;请给予应得的信任 - jesus.tesh 和其他评论者的建议......