Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Overriding SELECT behavior of Enter key

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:

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:

  • 1st Enter => activates editing on the cell (shows the select control)
  • 2nd Enter => expands the Select to show the Options
  • user makes selection using up/dn keys
  • 3rd Enter => closes the list. (Problem: this Enter is hidden from "keydown" event handler)
  • 4th Enter => required to trigger the event listener for deactivating cell edit.

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.

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?

NOTE: we are not using any 3rd party library (read: jQuery, et. al)

EDIT: 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 EDIT: per comments/suggestions, I've added/given this try:

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

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:

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

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.

like image 318
mjk Avatar asked Aug 09 '13 21:08

mjk


1 Answers

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.

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...

like image 57
mjk Avatar answered Nov 10 '22 03:11

mjk