JavaScript click () прерывает анимацию нажатия кнопки Bootstrap

Question

Я использую Bootstrap 4 для стиля. У меня есть кнопка на моей странице, которую я хочу, чтобы пользователи могли запускать нажатием клавиши.

Я добавил следующий Javascript, и он работает.

<script>
  document.addEventListener('keyup', function (event) {
    if (event.defaultPrevented) {
      return;
    }
    var key = event.key || event.keyCode;
    if (key === 'j' || key === 'KeyJ' || key === 74) {
      document.getElementById("myButton").click();
    }
});
</script>

HTML для этого просто

<button id="myButton" class="btn btn-success btn-lg" type="submit">Button</button>

и выглядит как любая кнопка в стиле Bootstrap .

ПРОБЛЕМА . Обычно, когда вы нажимаете кнопку, появляется небольшая анимация, которая воспроизводится при нажатии Bootstrap. Когда щелчок запускается с помощью JavaScript (то есть пользователь использовал нажатие клавиши), эта анимация не происходит, и пользователь не получает никаких отзывов о том, что кнопка была нажата. Поскольку пользователь будет преимущественно запускать нажатие через нажатие клавиши, я действительно хочу, чтобы обратная связь по клику была видимой.

Что не так с моим кодом, который нарушает анимацию Bootstrap? Есть ли другой подход, который позволял бы мне запускать нажатия кнопок при нажатии клавиш, как у меня здесь, но не нарушал анимацию обратной связи при нажатии?

CODEPEN : https://codepen.io/anon/pen/byebxg В демоверсии Codepen вы можете попробовать навести курсор мыши и нажать на кнопку, чтобы увидеть небольшую анимацию Bootstrap (в демо ничего не происходит). Вы также можете «щелкнуть» по нему, нажав «j» из-за фрагмента JavaScript (я добавил предупреждение, показывающее, что прослушивание нажатий клавиш работает). Однако, когда кнопка «нажата» таким образом, анимация кнопки не отображается. Есть ли способ заставить его играть, даже когда щелчок запускается сценарием JS?

Answer 1

Bootstrap использует JavaScript для обработки таких вещей, как анимация, в некоторых из своих компонентов, таких как переключение меню гамбургера, но в некоторых из их компонентов, таких как кнопки, Bootstrap использует CSS для анимации компонента с помощью простых CSS-анимаций, чтообрабатывается с использованием ключевых кадров CSS и преобразований и т. д.

Так что в вашем случае, поскольку вы отправляете событие click косвенным образом, эти события называются синтетическими событиями, а не событиями, запускаемыми самим браузером.

Таким образом, вы получаете больше контроля над тем, что делать в ответ на эти события щелчка, поэтому в вашем случае вам нужно добавить класс Bootstrap focus, чтобы дать компоненту кнопки небольшую контурную анимацию.

document.addEventListener('keyup', function(event) {
  if (event.defaultPrevented) {
    return;
  }
  let key = event.key || event.keyCode;
  let hotkeys = ['j', 'KeyJ', 74];

  if (hotkeys.includes(key)) {
    let elm = document.getElementById("myButton");
    elm.classList.toggle('focus');
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<button id="myButton" class="btn btn-success btn-lg" type="submit">Button</button>

Используя метод toggle, вы можете затем добавить класс focus, когда его нет, и удалить его, когда он там, после нажатиякнопку непосредственно в браузере или через клавиатуру.

Вы можете найти слово focus в исходном коде Bootstrap CSS , чтобы увидеть, что оно действительно делает, когда вы добавляете класс вкомпонент кнопки.

Answer 2

Вот использование Loader для обработки шоу -

   <button  class="btn btn-success btn-lg" type="submit"  id="load" data-loading-text=" 
   <i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Button</button>

Код JavaScript - -

  <script>
      $('.btn').on('click', function() {
         var $this = $(this);
           $this.button('loading');
              setTimeout(function() {
                     $this.button('reset');
                         }, 8000);
               });
   </script>

Answer 3

Итак, изучив это, я предполагаю, что анимация, о которой вы говорите, представляет собой увеличение границы, верно?

Если это так, то вы можете создать этот эффект по своему усмотрению, применивкласс 'focus' для элемента.

.... 
 var key = event.key || event.keyCode;
    if (key === 'j' || key === 'KeyJ' || key === 74) {
      var b = document.getElementById("myButton");
      b.classList.add('focus');
      b.click();
    }
....

Примечание: - Обязательно удалите класс фокусировки при нажатии клавиш, чтобы придать этой анимации ощущение.Что может быть достигнуто с помощью b.classList.remove('focus')

Answer 4

  document.addEventListener('keyup', function (event) {
    if (event.defaultPrevented) {
      return;
    }
    var key = event.key || event.keyCode;
    if (key === 'j' || key === 'KeyJ' || key === 74) {
      document.getElementById("myButton").style.background = 'lightgreen';
      document.getElementById("myButton").click();
    }
});

document.addEventListener('keydown', function (event) {
    if (event.defaultPrevented) {
      return;
    }
    var key = event.key || event.keyCode;
    if (key === 'j' || key === 'KeyJ' || key === 74) {
      document.getElementById("myButton").style.background = 'green';
    }
});

<button id="myButton" class="btn btn-success btn-lg" type="submit">Button</button>

При включении клавиш цвет вашей кнопки меняется, и ваш щелчок также работает.