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动画小片段（该演示中没有任何作用）。由于JavaScript代码段的原因，您还可以通过按“ j”来“单击”它（我添加了警报以表明按键监听正在工作）。但是，以这种方式“单击”按钮时，按钮动画不会显示。即使单击是由JS脚本触发的，也可以使它播放吗？

Answer 1

因此，在研究了这一点之后，我假设您正在谈论的动画是边框的增加，对吗？

如果是这种情况，则可以通过将“ 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();
    }
....

注意：-请确保删除keydown上的focus类，以使该动画具有某种感觉。可以通过以下方式实现 b.classList.remove('focus')

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

Bootstrap使用JavaScript处理其某些组件（例如，汉堡菜单的切换）中的动画之类的事情，但在本例中的某些组件（例如按钮）中，Bootstrap使用CSS通过简单的CSS动画对组件进行动画处理，使用CSS关键帧和转换等处理。

因此，在您的情况下，由于您是间接调度click事件，因此这些事件称为合成事件，与浏览器本身触发的事件相反。

通过这种方式，您可以更好地控制对这些单击事件的反应，因此，在您的情况下，您需要添加Bootstrap focus类以使按钮组件具有小轮廓动画。 / p>

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上添加该类，并在该类中删除它，然后直接在浏览器中或通过键盘单击按钮。

您可以在Bootstrap CSS源代码中搜索单词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>

在键盘上，您的按钮颜色正在改变，并且您的单击也起作用。

JavaScript click（）破坏了Bootstrap按钮的单击动画

4 个答案: