0

1) Is it possible, on the page load or when a key button is pressed, to automatically scan and focus the elements of an HTML page, one after the other (for example: links, inputs of text...)? I think that I should use a javascript function.

Also,

2) Is it possible to re-start the loop when the focus arrives at the end? (focus goes to element 1, then 2, 3, 4 and 5 then back to 1 and so on.)

3) Is it possible, at the press of a keyboard key, to stop the loop (for example, when the focus is on element 2), and, at a press of the same key, continue the loop from where it was blocked?

Thanks.

Andy Hopper
  • 3,618
  • 1
  • 20
  • 26
PenguinEngineer
  • 295
  • 1
  • 8
  • 30

3 Answers3

1

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

like in that answer you can loop through the elements with:

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();
}
Community
  • 1
  • 1
user1338871
  • 138
  • 1
  • 1
  • 10
  • I think that is the correct solution, but doesn't work for me...i just added in the body of the html page this But when i click on the button, the focus goes on the last element... – PenguinEngineer Feb 23 '15 at 16:21
1

1)It is better if you specify which all element should be focused rather than going through all the dom elements.

2)By this approach you can even specify in which order you want the elements to be focused.

I hope this is what you expected.

$(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>
roshan
  • 2,410
  • 2
  • 25
  • 37
  • no, this is not what i want...what i would want is an AUTOMATIC scan and focus of the elements of the page (for example, input elements). When I load the page, focus would move from all input elements, one after the other, without any pression of buttons (like your next tub button) or keyboard keys (like tab key) – PenguinEngineer Feb 23 '15 at 16:20
  • I have updated the answer. Is this what was expected. – roshan Feb 23 '15 at 16:42
  • Thank u so much, this is exactly what i want....just two considerations: 1 - It is possible to re-start the loop when focus arrives at the end...so, focus goes on element 1, then 2, 3, 4 and 5, then again, over element 1 etc 2 - It is possible, at the pression of a keyboard's key, to stop the loop (so, suppose when focus is over element 2), and, at the pression of the same key, continue the loop from where it was blocked Thanks – PenguinEngineer Feb 23 '15 at 17:21
  • You must add this to the post otherwise other answers will be incomplete. – roshan Feb 23 '15 at 19:01
  • I have updated the question make changes if something is missed out.And is the code working as you expected? – roshan Feb 23 '15 at 20:39
  • negative tab index is not valid.And you can solve this issues and it would be inappropriate to update the answer. Accept the answer and close this post. – roshan Feb 23 '15 at 22:15
0

if you want change focus depending on other event (like click event) you can say as the following :

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

but don't try to give focus to all elements (or a group of them) at the same time , Focus event can't be triggered for more than one element at once , you can find a lot information about this "fact" in Mozila Developers Network (MDN) , however you can give focus to the whole document :

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

or you can loop through html Dom as the following :

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

and this will give focus to all elements . but if you want change focus to the elements respectively at an specified interval you can use setInterval() function as the following :

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

and this will change focus to the next element in the dom every 3 seconds .

I hope this answer is the one you are after ...

mahmoud nezar sarhan
  • 746
  • 1
  • 9
  • 23