Как использовать javascript или jquery для ввода с клавиатуры, когда отображается html выпадающее меню? - PullRequest
Новая
       16

Как использовать javascript или jquery для ввода с клавиатуры, когда отображается html выпадающее меню?

1 голос
/ 31 мая 2019

Я хочу получить ввод, используя javascript или jquery, когда пользователь нажимает на клавиатуру. Это возможно, когда раскрывающееся меню не отображается. Когда отображается раскрывающееся меню, нажатие клавиши не запускается. 

<html>
<body>
<select id="test" onkeypress="sayHello()">
<option value="1">1234</option>
<option value="5">5678</option>
</select>
</body>

<script>
function sayHello(){
    alert("Hello");
}
</script>
</html>

1 Ответ

0 голосов
/ 31 мая 2019

Я думаю, что это невозможно при использовании раскрывающегося списка выбора по умолчанию, поскольку открытое раскрывающееся меню создается в верхней части окна браузера и фактически не является частью документа.

Вы можете использовать / построить какую-то замену, которая отображает пользовательское выпадающее меню с html-элементами внутри документа, а затем захватывает все нужные вам события.

Например, посмотрите на Select2 . Но есть и множество других библиотек.

Вот пример, который использует select2 и только предупреждает, если происходит событие keydown и раскрывающийся список: 

$(document).ready(function() {
  $('#example').select2({
    minimumResultsForSearch: 99
  });
  
  let isDropdownOpen = false;
  $('#example').on('select2:open', function(event) {
    isDropdownOpen = true;
  });
  $('#example').on('select2:close', function(event) {
    isDropdownOpen = false;
  });
  
  $(document).on('keydown', function(event) {
    if (isDropdownOpen) {
      event.preventDefault();
      alert('Hello!');
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

<select id="example" name="example">
  <option value="1234">1234</option>
  <option value="5678">5678</option>
</select>
...