重写Enter键的SELECT行为
Overriding SELECT behavior of Enter key
使用一个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和其他评论者的建议。。。
- jquery点击函数select&取消选择
- 在html Select中添加搜索
- jQuery/Javascript.toggleClass/.classList.toggle的特殊行为
- 不同浏览器中的空白字符正则表达式行为
- Jquery:未触发select事件
- 如何在PHP中使用$_POST获取Select元素值
- delete关键字在全局变量上的不同行为
- 无法在Ionic select中预先选择最后一个选项
- 在不阻止默认行为的情况下检测IE10中的缩放
- Dojo:访问dijit.form.Select中单击的项目
- 防止默认锚点行为AngularJS
- X秒后刷新select元素
- JavaScript匿名函数行为
- 根据select选项元素将表单重定向到不同的URL
- 重写Enter键的SELECT行为
- 使用mozIStorageStatement对象的executeAsync在SELECT中执行零结果行为
- Angularjs的select with filter会让第一行为空,但在预先应用filter时不会
- select .js关于无结果插件和允许默认链接行为的问题
- JQuery在SELECT之间移动项,过滤意外行为
- 为什么d3's select()和selectAll()在这里的行为不同?