Bootstrap 无法访问切换按钮

Question

我正在尝试测试 Bootstrap 切换按钮的实现，但他们的 js 中的某些内容不允许我使用键盘向他们 'tab'。当我删除 js 时，我可以 'tab' 到复选框就好了。任何人都可以帮助我扩展它以便我可以 'tab' 到每个切换按钮吗？

HTML

<div class="checkbox">
  <label>
    <input type="checkbox" data-toggle="toggle">
    Option one is enabled
  </label>
</div>

JS https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js

JSFIDDLE https://jsfiddle.net/galnova/s2x57t2u/

Answer 1

实际的 input 复选框隐藏（display: none）在花哨的 div.toggle-group 后面。这个 div 只是看起来像一个使用 CSS 的复选框并使用 JavaScript.

切换

事实是复选框实际上 focused/tabbed 在幕后，您只是无法直观地看到它，因为它是隐藏的。

如果您另有需要，您可以编写显式 JQuery 以在隐藏的复选框获得焦点时聚焦外部元素。

这是您需要包含的 JQuery 代码：

$( "input:checkbox" ).focus(function() {
  if($(this).is(':checked') == true) {
    $(this).next('.toggle-group').find('.toggle-on').attr('tabindex', '-1').focus();
  } else {
    $(this).next('.toggle-group').find('.toggle-off').attr('tabindex', '-1').focus();
  }
});

Answer 2

略有不同的方法

var $toggle = $('input:checkbox');
var $toggleDiv = $toggle.parent();
$toggleDiv.attr('tabindex','0');                // allow focus
$toggleDiv.unbind('keypress').keypress((e) => { // have enter trigger toggle
    if (e.which===13) {
        e.preventDefault();
        var newState = $toggle.is(':checked') ? 'off' : 'on';
        $toggle.bootstrapToggle(newState);
    }
})

Bootstrap 无法访问切换按钮

Bootstrap toggle buttons not accessible

html

javascript

jquery

toggle

twitter-bootstrap