Question

我在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键选择，但跳过切换按钮。

聚焦后，我需要在箭头按下活动/停用

上移动此切换

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

Answer 1

在不了解您的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">

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

Answer 2

<强>更新
虽然您的主要问题已得到解答，但现在您的问题仍然过于宽泛，以下是更新问题的解决方案：

<强> 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

Answer 3

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

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

对我有用

如何使用Tab键使Toggle按钮可对焦

3 个答案: