自动扫描和聚焦 HTML 页面的元素

Question

1) 是否可以在页面加载时或按下按键时自动扫描并聚焦 HTML 页面的元素，一个接一个（例如：链接、输入文本...）？我认为我应该使用 javascript 函数。

此外，

2) 是否可以在焦点到达末尾时重新开始循环？（焦点转到元素 1，然后是 2、3、4 和 5，然后回到 1，依此类推。）

3) 是否可以在按下键盘键时停止循环（例如，当焦点位于元素 2 上时），并在按下同一键时继续循环哪里被屏蔽了？

谢谢。

Answer 1

Javascript: How to loop through ALL DOM elements on a page?

就像那个答案一样，您可以循环遍历元素：

var all = document.getElementsByTagName("*");

for (var i=0, max=all.length; i < max; i++) {
     // Do something with the element here like focus:
     all[i].focus();
}

Answer 2

1)如果您指定应该关注哪些所有元素而不是遍历所有dom元素会更好。

2)通过这种方法，您甚至可以指定您希望元素聚焦的顺序。

希望这是您所期望的。

$(document).ready(function() {
  currentTabIndex = 1;
  var totalTabIndexes = $("[tabindex]").length;
  var arrayOfkeys = new Array();


  function focusCycle() {
    if (currentTabIndex <= totalTabIndexes) {
      $("[tabindex=" + currentTabIndex + "]").focus();
      currentTabIndex++;
    } else {
      currentTabIndex = 1;
      $("[tabindex=" + currentTabIndex + "]").focus();
      currentTabIndex++;
    }
  }

  //start the cycle
  var tabIndexTimer = setInterval(focusCycle, 500);


  $(document).on("keypress", function(e) {
    //check if the key was pressed earlier
    var wasKeyPressedEarlier = $.inArray(e.which, arrayOfkeys);
    if (wasKeyPressedEarlier != -1) {
      //if the key was pressed earlire stop the focus cycle
      arrayOfkeys.splice(wasKeyPressedEarlier, 1);
      tabIndexTimer = setInterval(focusCycle, 500)
    } else {
      //if key is pressed for the first time push it in the array
      arrayOfkeys.push(e.which);
      clearInterval(tabIndexTimer);
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>1
  <input type="text" placeholder="1" tabindex="1">
</div>
<div>3
  <input type="text" placeholder="3" tabindex="3">
</div>
<div>4
  <input type="text" placeholder="4" tabindex="4">
</div>
<div>2
  <input type="text" placeholder="2" tabindex="2">
</div>
<div>5
  <input type="text" placeholder="5" tabindex="5">
</div>

Answer 3

如果你想根据其他事件（如点击事件）改变焦点你可以这样说：

ElementsNumber = document.getElementsByTagNam('*') ; 
/* or you can say ElementsNumber = document.getElementById('foo'); where foo 
is the container of the elements that you want to toggle focus between*/
var x = 0 ;
function changeFocus()
{
ElementsNumber[x].focus();
++x ;
}
document.getElementById('focus-button').onclick = changeFocus()
// where the 'focus-button' is the element which you want to change focus if it clicked

但不要尝试同时给所有元素（或一组）提供焦点，不能同时为多个元素触发焦点事件，你可以找到很多关于Mozila Developers Network (MDN) 中的 "fact"，但是您可以将焦点放在整个文档上：

$(document).focus(); //jquery
window.focus(); // pure javascript

或者您可以按以下方式循环 html Dom :

ElementsNumber = document.getElementsByTagNam('*') ;
for ( i = 0 ; i < ElementsNumber.length ; i++ ) 
{
 // somethings to be done to all elements
}

这将使所有元素成为焦点。但是如果你想在指定的时间间隔分别将焦点切换到元素，你可以使用 setInterval() 函数，如下所示：

ElementsNumber = document.getElementsByTagNam('*') ;
var x = 0 ;
function changeFocus()
{
ElementsNumber[x].focus();
++x ;
}
setInterval(function(){ changeFocus(); }, 3000);

这将每 3 秒将焦点更改到 dom 中的下一个元素。

我希望这个答案是您想要的...

自动扫描和聚焦 HTML 页面的元素

Scan and Focus elements of an HTML page automatically

javascript

html

onload

elements