Имитация длительного нажатия клавиши

#javascript

Меня интересует
Как медленно физически нажать на кнопку с помощью javascript на веб странице сайта?

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

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

вот нашел фрагмент команды например



  addEventListener("keydown", function(event) {
    if (event.keyCode == 32 && event.ctrlKey)
      console.log("Продолжаем!");
  });





  События «keydown» и «keyup» дают информацию о физическом нажатии
  кнопок. А если вам нужно узнать, какой текст вводит пользователь?
  Создавать его из нажатий кнопок – неудобно. Для этого существует
  событие «keypress», происходящее сразу после «keydown» (и
  повторяющееся вместе с «keydown», если клавишу продолжают удерживать),
  но только для тех кнопок, которые выдают символы. Свойство объекта
  события charCode содержит код, который можно интерпретировать как код
  Unicode.


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

То есть я о чем? чтобы имитировать реальное нажатие на кнопку, кнопку(ссылку), а
не программный переход по сайту. Как реально это лучше сделать?
    

Ответы

Ответ 1

Вот реализация, остальное по примеру можете накрутить сами )





(function(){
addEventListener("keydown", function(event) {
    if (event.keyCode == 32 && event.ctrlKey)
      document.getElementById('btn').classList.add('active');
  });
})()
 
button.active { background-color: green;transition: all 5s ease; }





Это с покраской, но мне нравиться больше вот эта реализация



(function(){
addEventListener("keydown", function(event) {
    if (event.keyCode == 32 && event.ctrlKey)
      document.getElementById('btn').classList.add('active');
	  setTimeout(function(){
	  document.getElementById('btn').classList.remove('active');
	  },1000)
  });
})()
button.active { border-style: inset;  background: red; color:#fff;}



Ответ 2

используйте css3 transition-delay.

код примерно будет такой:



button:hover {
  background-color: red;
  transition: all 2s ease;
}
button:active {
  background-color: green;
  transition: all 5s ease;
}
button:focus {
  background-color: blue;
  transition: all 2s ease;
}
`