Как получить фокус вкладки на первом поле при нажатии на вкладку с помощью angular8 - PullRequest
Новая
       71

Как получить фокус вкладки на первом поле при нажатии на вкладку с помощью angular8

1 голос
/ 13 марта 2020

Привет, у меня всего 6 вкладок, при нажатии одной вкладки открывается под вкладка. Как только открывается вложенная вкладка, я хочу, чтобы фокус был на первом дочернем элементе каждой вкладки. Я попытался взять идентификатор первой вкладки и попытаться получить идентификатор вложенной вкладки в этом. Например: 1-я вкладка - details_basic_info, ее подвкладка содержит tab-details_basic_info. Поэтому я попытался сделать так, чтобы details_basic_info извлекался и основывался на этом, добавляя 'tab-' с идентификатором динамически извлекаемой главной вкладки, на которой она нажата. Но я не смог реализовать. Кто-нибудь может мне помочь, как это можно сделать.

Заранее спасибо.

ДЕМО: ДЕМО

1 Ответ

1 голос
/ 13 марта 2020

Если бы это был я, я бы, вероятно, сделал что-то подобное (хотя и немного менее повторяющееся с обработкой метода, но эй, это всего лишь быстрое ванильное js доказательство концепции, например, слитое с bootstrap, но легко может быть портировано на angular), поэтому вам все равно, какой первый элемент, способный фокусироваться, пока он находится в массиве, который можно сфокусировать.

Надеюсь, это поможет, ура! 

const focusableList = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';

focusFirstFocusableChildPoC = (id) => {

  const contentPane = document.getElementById(id);

  if (contentPane) {
  
      const focusableElements = contentPane.querySelectorAll(focusableList),
            firstFocusable = focusableElements[0];          
            // Typescript will want this to be <HTMLElement>focusableElements[0]; to cast.

      window.setTimeout(function () {
          // Kick this to the back of the line with the 'ol 0 timeout trick.
          firstFocusable ? firstFocusable.focus() : notifyOfFailure();
      }, 0); 
      

  } else {
     notifyOfFailure(); 
  }
}

notifyOfFailure = () => {
  alert('NO FOCUS FOR YOU!');
}
.tab-content {
  padding: 2rem;
}

.tab-content *:focus {
  outline: red 3px dotted;
}

.tab-content *:focus:after {
  content: '*';
  margin-top: 1rem;
  color: red;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#panel1" role="tab" onclick="focusFirstFocusableChildPoC('panel1')">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#panel2" role="tab" onclick="focusFirstFocusableChildPoC('panel2')">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#panel3" role="tab" onclick="focusFirstFocusableChildPoC('panel3')">Contact</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#panel4" role="tab" onclick="focusFirstFocusableChildPoC('panel4')">Contact</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#panel5" role="tab" onclick="focusFirstFocusableChildPoC('panel5')">Contact</a>
  </li>
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane show active" id="panel1" role="tabpanel">
    <input placeholder="a text input" type="text">
    <button>A Button</button>
    <input type="checkbox">
    <input type="number">
  </div>
  <div class="tab-pane" id="panel2" role="tabpanel">
    <label><input type="checkbox"> Focus testing</label>
    <input type="text">
    <button>A Button</button>
    <input type="number">
  </div>
  <div class="tab-pane" id="panel3" role="tabpanel">
    <button>A Button</button>
    <input type="text">
    <input type="checkbox">
    <input type="number">
  </div>
  <div class="tab-pane" id="panel4" role="tabpanel">
    <a href="#">Test Anchor Link</a>
    <button>A Button</button>
    <input type="text">
    <input type="checkbox">
    <input type="number">
  </div>
  <div class="tab-pane" id="panel5" role="tabpanel">
    Nothing here to focus bro...
  </div>
</div>
...