Как получить поддержку страницы для набора текста с клавиатуры, чтобы запустить модал? - PullRequest
Новая
       19

Как получить поддержку страницы для набора текста с клавиатуры, чтобы запустить модал?

0 голосов
/ 20 сентября 2019

Эта ссылка запускает блокнот jupyter.

enter image description here

Когда страница загружена,

набрав h , запустит модальный режим («Сочетания клавиш»)

enter image description here

, набрав f ,запустить еще один модальный режим "Найти и заменить"

enter image description here

Как обеспечить поддержку страницы для набора текста с клавиатуры для запуска модального режима?

Это ссылка дает некоторое вдохновение внутри модального.

Это и это дают примеры об одном элементе, хотя я прошу подход к прослушиванию нажатия клавишсобытие на всей странице

вопрос

Вот мой код, который пытается прослушать любое нажатие клавиши 

<!DOCTYPE html>
<html>

<head>
    <script>
        i = 0;
        $(document).querySelector('#myDiv').addEventListener('keyup', function (e) {
            $("span").text(i += 1);
        })
    </script>
</head>

<body>
    <div class="container" id="mydiv" tabindex="0">
        <p>Keypresses: <span>0</span></p>
    </div>

</body>

</html>

Как заставить этот код работать?

Ответы [ 3 ]

3 голосов
/ 20 сентября 2019

Вы проводите событие неправильно.В jQuery используйте on(), чтобы связать событие и предоставить селектор для целевого элемента во втором аргументе: 

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    i = 0;
    $(document).on('keyup', '#mydiv', function(e) {
      $("span").text(i += 1);
    })
  </script>
</head>

<body>
  <div class="container" id="mydiv" tabindex="0">
    <p>Keypresses: <span>0</span></p>
  </div>
</body>

Конечно, не забудьте щелкнуть внутри элемента, прежде чем начать печатать.Теперь, если вы хотите узнать, какая клавиша была нажата, вы можете использовать e.key.Это хорошо, если вы хотите получить символы, но если вы хотите реализовать ярлыки, лучше использовать e.keyCode: 

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).on('keyup', '#mydiv', function(e) {
      $("span").text(e.key + " (" + e.keyCode + ")");
    })
  </script>
</head>

<body>
  <div class="container" id="mydiv" tabindex="0">
    <p>Keypresses: <span>0</span></p>
  </div>
</body>
1 голос
/ 20 сентября 2019

Следующий код основан на коде в вас ссылка .

Прежде всего, вам нужно установить и id в <body>;

<body id="mybody">

, а затем вам нужно добавить прослушивание и, наконец, показать модальный 

<script type="text/javascript">
    $(document).ready(function () {
        $("#mybody").keypress(function (event) {
            $("#exampleModal").modal('show');
        });
    });
</script>
0 голосов
/ 20 сентября 2019

может быть, вам стоит попробовать это 

    document.addEventListener('keyup', function (event) {
            if (event.defaultPrevented) {
                return;
            }

            var key = event.key || event.keyCode;
            console.log(key); // which "key" is the key you clicked on
            // Then you should test which key is clicked so you can do whatever you want like so
            if(key == 'Esc'){
              //Do the magic

            }
        });
...