CODEWITHSUNDEEP
htmlangularcss
sumit kumar ray
sumit kumar ray

Reputation: 230

how to make Toggle button focusable, using tab key

I am using this in angular4 environments so afraid of use jquery, Here is my HTML and 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);
}

Below is this URL where this code is working: https://plnkr.co/edit/eVX3ATeizyuTIkqzmG94?p=preview

I have a few inputs before the toggle, all input is selectable using tab key but toggle button get skipped.

After focus, I need to move this toggle on the arrow press active/deactivate

OR how we can select checkbox using the keyboard.

Upvotes: 0

Views: 4202

Answers (3)

Sylwia M
Sylwia M

Reputation: 130

Try to set tabindex="0" on both: input and span:

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

It works for me

Upvotes: 0

Vega
Vega

Reputation: 28708

UPDATE:
Although your primary question was answered and now you have borderline a too broad question, here is solution for the updated question:

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>

PRIMARY QUESTION ANSWER:

Remove this line:

.switch input {display:none;}

as it's the input tag that could get the focus and set an other color when focused to hightlight the focus:

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

DEMO

Upvotes: 2

Alex
Alex

Reputation: 21

Without knowing more about your HTML structure it's hard to tell you how to solve it, but you can add a tabindex attribute to your inputs to make the browser know in which order they should be reachable in when tabbing. For example:

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

This should force the browser to not skip one of them.

Upvotes: 1

Related Questions