2013-08-09 2 views
8

Работа над элементом управления HTML, который работает больше/меньше, чем электронная таблица - с матрицей доступных для редактирования ячеек данных. Когда дело доходит до ячеек, полученных из SELECT, у меня возникла проблема с правильным правилом, когда этот тип ячейки выбран для редактирования:Переопределение поведения SELECT клавиши Enter

Если я отрисую Select, используя его форматирование по умолчанию (size = 0), тогда пользователь получает вне места поведения Выбрать войдут ключ обработки:

  • первого Enter => активирует редактирование в ячейке (показывает выберите управление)
  • второй Enter => расширяет Выберите, чтобы показать Параметры
  • пользователь делает выбор, используя up/dn ключи
  • 3rd Enter => закрывает список. (Проблема: этот ввод скрыт от обработчика события «keydown»)
  • 4th Enter => требуется для запуска прослушивателя событий для деактивации редактирования ячейки.

С другой стороны, если выбрать визуализируется как ListBox (то есть, размер = 3, например) Введите ключевое поведение является именно то, что я ищу (а значит, # ​​2 и # 3 в приведенном выше списке больше не требуется), но поскольку список теперь отображается внутри элемента управления (а не как всплывающее окно), он взрывает размер ячейки/строки.

Итак, есть ли способ «подключиться» к третьему событию Enter-key выше или другому относительно прямому способу изменить поведение Select, когда дело доходит до обработки клавиши Enter?

Примечание: мы не используем любую библиотеку 3rd партии (читай:. 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 
    } 
} 

второй EDIT: за комментарии/предложения, я добавил/дал это попробовать:.

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

это событие будет срабатывать, но это срабатывает для каждого из различных опций/с другими словами, это Безразлично я не вижу, что буду любой способ определить, является ли это Опцией, что пользователь на самом деле предназначил для выбора, или только тот, который был пройден по пути. Чтобы продемонстрировать, вот какой-то пример для сайта jquery. Обратите внимание, как текст меняется с каждым вверх/вниз, независимо от того, введите ключ:

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

РЕШИТЬ: спасибо всем комментаторам за их предложения. Действительно, решение (для моей ситуации в любом случае) заключалось в том, чтобы добавить в микс прослушиватель событий «keyup». Я не могу сказать, в каких браузерах это будет работать, но оно функционирует в более поздних версиях Chrome.

+0

3rd enter => 'onchange', возможно? –

+0

Почему третий скрывается от обработчика 'keydown'? –

+0

onChange ... спасибо, я посмотрю. Джастин: Я понятия не имею, все, что я могу сказать, это то, что событие не является триггером, когда Select находится в расширенном состоянии. Я отправлю обработчик событий. – mjk

ответ

2

В соответствии с предложениями, способ получить «скрытое» событие Enter-key - добавить слушателя событий «keyup»; вопрос был отредактирован для отражения решения.

ПРИМЕЧАНИЕ: этот ответ был отправлен только для закрытия вопроса; пожалуйста, дайте кредит там, где это должно быть - jesus.tesh, а остальные комментаторы за их предложения ...

Смежные вопросы