覆盖Enter键的SELECT行为 [英] Overriding SELECT behavior of Enter key
问题描述
使用一个HTML控件，该控件或多或少地像电子表格一样工作-带有可编辑数据单元的矩阵.当涉及到从SELECT派生的单元格时，在选择该类型的单元格进行编辑时，我遇到了获取正确行为的问题:
Working on a HTML control that more/less operates like a spreadsheet - with a matrix of editable data cells. 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键处理的不当行为:
If I render the Select using its default formatting (size = 0) then the user gets the out-of-place behavior of Select's Enter-key processing:
- 第一个Enter =>激活单元格上的编辑(显示选择控件)
- 第二个输入=>展开选择"以显示选项
- 用户使用向上/dn键进行选择
- 第三个Enter =>关闭列表. (问题:此Enter从"keydown"事件处理程序中隐藏了)
- 第4个Enter =>是触发事件侦听器以停用单元格编辑所必需的.
另一方面，如果将选择呈现为列表框(例如，size = 3)，则Enter键的行为正是我要查找的内容(即，上面列表中的#2和#3)不再需要)，但是由于该列表现在显示在控件内部(而不是作为弹出窗口)，因此会炸毁单元格/行的大小.
On the other hand, if the select is rendered as a listbox (ie, size = 3, for example) the Enter key behavior is exactly what I'm looking for (meaning, #2 and #3 on the above list are no longer required), but because the list is now displayed internally to the control (rather than as a pop-up) it blows up the cell/row sizing.
那么，有没有办法钩住"上面的第三个Enter键事件，或者有其他一些相对直接的方法来改变Select在处理Enter键时的行为?
So, is there a way to "hook" into the 3rd Enter-key event above, or some other relatively straight-forward way to alter the Select's behavior when it comes to processing the Enter key?
注意:我们没有使用任何第三方库(请参阅:jQuery等)
NOTE: we are not using any 3rd party library (read: jQuery, et. al)
这是事件侦听器(通过典型的"addEventListener(...)"附加
here is the event listener (attached via typical "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
}
}
第二次根据评论/建议，我已经添加/给出了这种尝试:
2nd per comments/suggestions, I've added/given this try:
this.e_sOnChange = function(control, event) {
control.blur()
}
该事件将触发，但会为每个不同的Option触发.换句话说，似乎没有任何方法可以确定这是用户实际打算进行选择的选项，还是只是沿途遍历的选项.为了演示，这是jquery网站的任何示例.请注意，无论Enter键如何，文本在每次向上/向下时如何变化:
That event will fire, but it fires for each of the different Option/s. In other words, it doesn't appear that I'll have any way to determine if that is the Option that the user actually intended for selection, or just one that was traversed along the way. To demonstrate, here is any example for jquery's site. Note how the text changes with each up/down, regardless of Enter-key:
已解决:感谢所有评论者的建议.实际上，解决方案(无论如何针对我的情况)是在组合中添加"keyup"事件侦听器.我无法说这能在哪些浏览器中使用，但在更高版本的Chrome中可以使用.
SOLVED: thanks to all the commenters for their suggestions. Indeed, the solution (for my situation anyway) was to add a "keyup" event listener into the mix. I can't say what browsers this will work in, but it is functional in the later versions of Chrome.
推荐答案
根据建议，获取隐藏的" Enter键事件的方法是添加"keyup"事件侦听器.问题已被编辑以反映解决方案.
Per suggestions, the way to pick up the "hidden" Enter-key event is to add a "keyup" event listener; question has been edited to reflect the solution.
注意::此答案仅是为了结束问题而发布的；请在适当的地方注明-jesus.tesh和其余评论者的建议...
NOTE: this answer was only posted to close the question; please give credit where it is due - jesus.tesh and the rest of the commenters for their suggestions...
这篇关于覆盖Enter键的SELECT行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
