Jquery UI selectmenu keycodes 115/116 предотвращает?

https://jqueryui.com/selectmenu/ имеет очень необычную реакцию на событие при нажатии клавиши 115 (F4 ). Когда вы развернете список и нажмете кнопку F4, для изменения будут выбраны опции some и some+1. В примере из ссылки - первый и второй вариант, но в моем приложении 20 и 21 узел списка: O .

Ошибка? Можно ли предотвратить это?

В моем приложении я обнаружил вторую странную реакцию на код клавиши 116 (F5). Когда вы разворачиваете список и нажимаете кнопку F5, перед перезагрузкой страницы выбирается какой-то параметр. В моем приложении это 10. Это не круто для меня, потому что я заставляю какой-то проект работать. В этом проекте есть событие, которое отправляет запрос ajax для сохранения данных в сеансе при изменении выбранного параметра, но после нажатия F5 приложение отправляет запрос ajax перед перезагрузкой страницы, которая изменяет какой-либо атрибут в сеансе на 10, потому что, как я сказал, когда u нажмите F5 selectmenu изменить выбранный узел на 10.

Пример: https://jqueryui.com/selectmenu/ Нажмите на selectmenu с заголовком "Выберите скорость" и нажмите F4

Можно ли предотвратить это событие?


person kmad    schedule 21.02.2018    source источник
comment
Добавьте в свой вопрос минимально воспроизводимый пример.   -  person Kosh    schedule 21.02.2018
comment
Пример здесь jqueryui.com/selectmenu Нажмите на selectmenu с заголовком Выберите скорость и нажмите F4   -  person kmad    schedule 21.02.2018


Ответы (1)


Вы можете изменить прототип selectmenu следующим образом (см. и запустите фрагмент кода ниже):

$(function() {

  var ok = $.ui.selectmenu.prototype._buttonEvents.keydown;
  $.ui.selectmenu.prototype._buttonEvents.keydown = function(e) {
    if (e.keyCode == 115 || e.keyCode == 116) e.stopPropagation();
    ok.call(this, e);
  }

  var a = $("#speed").selectmenu();

});
label {
  display: block;
}

select {
  width: 200px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<label for="speed">Select a speed:</label>
<select name="speed" id="speed">
  <option value="Slower">Slower</option>
  <option value="Slow">Slow</option>
  <option value="Medium" selected>Medium</option>
  <option value="Fast">Fast</option>
  <option value="Faster">Faster</option>
</select>

person Kosh    schedule 21.02.2018