如何使用 Tab 键使切换按钮可聚焦答案

【问题标题】：how to make Toggle button focusable, using tab key如何使用 Tab 键使切换按钮可聚焦
【发布时间】：2018-10-11 14:45:08
【问题描述】：

我在 angular4 环境中使用它，所以害怕使用 jquery，这是我的 HTML 和 CSS：

<div class="row"> <input type="text"></div>
<div class="row"> <input type="text"></div>
   <div class="row"> <input type="text"></div>
   <div  class="row"> <label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label></div>
<div class="row"> <input type="text"></div>
<div class="row"> <input type="text"></div>
<div class="row"> <input type="text"></div>



    .row{
  padding:15px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

以下是此代码工作的 URL： https://plnkr.co/edit/eVX3ATeizyuTIkqzmG94?p=preview

在切换之前我有一些输入，所有输入都可以使用 Tab 键选择，但切换按钮会被跳过。

焦点后，我需要在箭头上移动此切换按钮按激活/停用

或者我们如何使用键盘选择复选框。

【问题讨论】：

请提供您的组件的完整 html 代码。不看全貌就很难理解你的问题

标签： html angular css

【解决方案1】：

更新：
尽管您的主要问题已得到解答，但现在您的问题过于宽泛，以下是更新后问题的解决方案：

HTML：

<div class="row"> <input #input1 (keydown)="input2.focus()" type="text"></div>
<div class="row"> <input #input2 (keydown)="input3.focus()" type="text"></div>
<div class="row"> <input #input3 (keydown)="input4.focus()" type="text"></div>
<div class="row"> <label class="switch">
  <input type="checkbox" #input4 (keydown)="input5.focus()" checked>
  <span class="slider round"></span>
</label></div>
<div class="row"> <input #input5 (keydown)="input6.focus()" type="text"></div>
<div class="row"> <input #input6 (keydown)="input7.focus()" type="text"></div>
<div class="row"> <input #input7  type="text"></div>

主要问题答案：

删除这一行：

.switch input {display:none;}

因为它是input 标签，它可以获得焦点并在聚焦时设置其他颜色以突出显示焦点：

input:focus + .slider {
   background-color:red;
   ...
}

DEMO

【讨论】：

在箭头键上应该切换
箭头键不在这个问题范围内，对吧？

【解决方案2】：

如果不了解更多关于您的 HTML 结构的信息，很难告诉您如何解决它，但是您可以在输入中添加 tabindex 属性，以使浏览器知道在切换时应该按什么顺序访问它们。例如：

<input tabindex="1" type="checkbox" class="checkbox-toggle">
<input tabindex="2" type="checkbox" class="checkbox-toggle">
<input tabindex="3" type="checkbox" class="checkbox-toggle">
<input tabindex="4" type="checkbox" class="checkbox-toggle">

这应该会强制浏览器不跳过其中一个。

【讨论】：

【解决方案3】：

尝试在输入和跨度上都设置tabindex="0"：

<input type="checkbox" tabindex="0" checked> <span class="slider round" tabindex="0"></span>

对我有用

【讨论】：