Запуск установки фокуса на «DIV» с помощью Javascript — NO JQUERY — Angular ng-click

Триггер устанавливает фокус на элемент «DIV» при нажатии с помощью директивы Angular

<a href="#" class="skipToContent" ng-click="showContent()" title="skip-to-main-content">Skip To Main Content</a>


<div class="getFocus" role="button" tabindex="0">
        <span>Am Focused</span> 
</div>

Когда я нажимаю на эту ссылку, она должна сместить фокус на div

Для этого я написал этот фрагмент кода PSB.

Я попытался использовать scrollIntoView(); также, но не уверен, что это будет работать во всех браузерах, и у меня это тоже не работает.

$scope.showContent = function() {
    var x = document.querySelector('.skipToContent');
    var y = document.querySelector('.getFocus');
    y.focus();
    console.log(document.activeElement);
});
};

Примечание. Мы не можем добавлять идентификаторы или классы в DOM.

https://jsfiddle.net/wrajesh/wo7gkm7d/


javascript setfocus html angularjs
person lost_in_magento    schedule 30.11.2016    source источник
comment
Кроме того, x.addEventListener — это правильная функция, которую вы ищете developer.mozilla .org/en-US/docs/Web/API/EventTarget/   -  person christopher clark    schedule 30.11.2016
comment
stackoverflow.com/questions/3656467/   -  person starcorn    schedule 30.11.2016

Ответы (3)


arrow_upward
2
arrow_downward

Функция scrollIntoView работает во всех основных браузерах (включая chrome/firefox/ie>=8), однако, если вы хотите прикрепить событие click к элементу, вам следует использовать функцию addEventListener:

var x = document.querySelector('.skipToContent');
var y = document.querySelector('.getFocus');
x.addEventListener('click', function(e) {
  y.scrollIntoView()
});

Проверьте этот фрагмент:

var x = document.querySelector('.skipToContent');
var y = document.querySelector('.getFocus');
x.addEventListener('click', function(e) {
  e.preventDefault()
  y.scrollIntoView()
});
<a href="#" class="skipToContent" title="skip-to-main-content">Skip To Main Content</a>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="getFocus" role="button" tabindex="0">
  <span>Am Focused</span>
</div>

Примечание. e.preventDefault() нужен для того, чтобы браузер игнорировал стандартное поведение события click для тега a.

person Dekel    schedule 30.11.2016
comment
Привет, Декель. Я отредактировал свой вопрос: как мы можем нажать это в Angular ng-click? - person lost_in_magento; 30.11.2016
comment
По поводу angular ng-click - буду разбираться - person Dekel; 30.11.2016
comment
Я дал вам 1 вверх!! :P Заранее спасибо - person lost_in_magento; 30.11.2016
comment
Работал как шарм! Я использовал его без события клика: document.querySelector('.goToClass').scrollIntoView() Спасибо! - person Maxi; 12.02.2020

arrow_upward
1
arrow_downward

Установить фокус так же просто, как вызвать функцию focus() на целевом элементе DOM:

document.querySelector('.skipToContent').onclick = function() {
  document.querySelector('.getFocus').focus()
}
<a href="#" class="skipToContent" title="skip-to-main-content">Skip To Main Content</a>

<div class="getFocus" role="button" tabindex="0">
  <span>Am Focused</span> 
</div>

person TimoStaudinger    schedule 30.11.2016
comment
Это очень хорошо, но если у вас есть идея сделать это в Angular ng-click? Пожалуйста, поделитесь - person lost_in_magento; 30.11.2016

arrow_upward
0
arrow_downward

Лучший способ справиться с переходом к основному контенту без использования JavaScript:

  1. сделайте пропуск, чтобы связать внутреннюю ссылку, указывающую на идентификатор div-оболочки, к которому вы хотите перейти.
  2. убедитесь, что у целевого div-оболочки есть tabindex="-1", чтобы он мог получить фокус. Это поможет программам чтения с экрана и тем, кто использует доступ только с клавиатуры.

Конечно, фактической прокрутки не произойдет, если страница слишком короткая. Больше контента, больше возможностей для прокрутки.

<p><a href="#mainContent">Skip to main content</a></p>
<nav>
  <ul>
    <li><a href="#">nav item one</a></li>
    <li><a href="#">nav item two</a></li>
    <li><a href="#">nav item three</a></li>
  </ul>
</nav>
<div id="mainContent" tabindex="-1">
  <h1>Welcome</h1>
  <p>Here is some content</p>
</div>

Я сохранил родной стиль div: focus, чтобы вы могли видеть, как он работает, но вы захотите его стилизовать (только для этого div. Сохраняйте контуры фокуса для активных элементов)

person haltersweb    schedule 30.11.2016
comment
Привет, Холтерс. Спасибо за решение. Я не могу добавить идентификаторы или классы в DOM. Пожалуйста, поделитесь каким-нибудь другим решением. - person lost_in_magento; 30.11.2016