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

332
04 сентября 2017, 08:12

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

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

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

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

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

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

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

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

Answer 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; }
<button id="btn">Click me!</button>

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

(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;}
<button id="btn">Click me!</button>

Answer 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; 
}
<button>Click me!</button>`

READ ALSO
Тип данных в массиве
javascript

Тип данных в массиве

 224
Как добавить классы для объектов на canvas?
javascript

Как добавить классы для объектов на canvas?

Страница содержит svg и canvas, хочу передать svg в canvas, сохранив встроенную в svg анимацию, чтобы тоже срабатывала при наведении курсора, но уже...

 279
Scroll в конец страницы при нажатии на &lt;button&gt;
javascript

Scroll в конец страницы при нажатии на <button>

Добрый Вечер! Интересует такой вопрос, существует ли JS функция которая при нажатии на клавишу button, делает скролл в конец страницы спустя 1 секунду?...

 411
Не обновляется состояние Redux
javascript

Не обновляется состояние Redux

Использую 'react-fileupload' для выбора файла и отправки на сервер, в случае успеха получаю ответ с содержимым файла, но состояние хранилища не обновляется

 261