How to implement autofocus attribute feature for multiple tab views in a single html page?

Question

Currently, am working on a web project whose sample is hosted in :

https://meet-up-db14d.firebaseapp.com/

what I want to implement is to use autofocus attribute feature in both tabs having forms. whenever I switch tabs the cursor should be autofocused to the first input of the respective form in that tab view.

score 0 · Accepted Answer · answered Jan 30 '17 at 05:26

By including following script in the template html file I was able to implement what I was looking for:

 <script>
 var tabs = {
  one: document.querySelector('#one'),      //tab id="one"
  two: document.querySelector('#two'),     //tab id="two"
  three: document.querySelector('#three') //tab id="three"
 };

 tabs.one.addEventListener('click', function(e) {
 //console.log('one');
 document.getElementById("User Name").focus();
 });

 tabs.two.addEventListener('click', function(e) {
 //console.log('two');
 document.getElementById("Event name").focus();
 });
 </script>

How to implement autofocus attribute feature for multiple tab views in a single html page?

1 Answers1