Как вызвать кнопку html и функцию ее нажатия с помощью аппаратной клавиши клавиатуры? - PullRequest
Новая
       108

Как вызвать кнопку html и функцию ее нажатия с помощью аппаратной клавиши клавиатуры?

1 голос
/ 23 октября 2019

Я новичок в кодировании, и эта тема, вероятно, очень распространена, но она меня сильно смущает.

У меня есть кнопка <button onclick = typeWriter()>/click</button>

Моя функция: var myArray = ['such', 'something else', ]; var rand = myArray[Math.floor(Math.random() * myArray.length)]; var i = 0; var speed = 55; function typeWriter() { if (i < rand.length) { document.getElementById("question").innerHTML += rand.charAt(i); i++; setTimeout(typeWriter, speed); } }

Как добавить клавишу клавиатуры, например пробел, в качестве прослушивателя событий или чего-то подобного, чтобы при нажатии клавиши пробела (а не в текстовом поле) она нажимала кнопку и запускала функцию? Простой ванильный ответ на javascript был бы предпочтительнее, так как я не получаю jQuery.

Было бы лучше просто добавить сценарий, который запускает myFunction с помощью пробела, а не через нажатие кнопки? И если да, то как мне это программировать?

Кстати: я пытаюсь сделать это для мобильных устройств, используя клавиатуру iPad. Это что-нибудь изменит?

Спасибо.

Ответы [ 2 ]

0 голосов
/ 23 октября 2019
  • не использовать встроенный JS
  • Использовать addEventListener()
  • Использовать Event.key для определения нажатой клавиши
  • Использовать вспомогательную функцию, чтобы определить,текущий Event.target является FormElement 

// Function to detect if el is a form element
const isFormElement = el => /^(input|textarea|select|button)$/i.test(el.nodeName);

// Example function
const myFunction = ev => console.log("HELLO!");

// Find buttons in DOM
const EL_myfn = document.querySelectorAll('.js-myFunction');

// Trigger directly on buttons click
EL_myfn.forEach(el=> el.addEventListener('click', myFunction));

// And on keydown
window.addEventListener('keydown', ev => {
  // If spacebar is hit, and we're not inside a forminput element
  if (ev.key === " " && !isFormElement(ev.target)) {
    myFunction();
  }
})
textarea{width: 100%;}
<button class="js-myFunction">Click me! (Console  should log)</button>
<div>press spacebar here (Console should log)</div>
<textarea>press spacebar here (Console should not log!!)</textarea>
0 голосов
/ 23 октября 2019

Вы можете добавить прослушиватель на window, если вы хотите запускать свою функцию везде в вашем HTML. 

window.onkeydown = function(event) {
    if (event.keyCode == 32) {
        //your function here
    };
};

Здесь вы можете найти все коды клавиш для клавиатуры: https://keycode.info/

...