CODEWITHSUNDEEP
javascript
Betty Mock
Betty Mock

Reputation: 1393

Having trouble with Javascript focus()

There are 3 programs, Pers1, Pers2, Pers3. Pers1 and Pers2 have forms to fill in, and Pers3 produces a report. Pers2 includes Pers1 and Pers3 includes Pers2. Thus if you get as far as a report, both Pers1 and Pers2 are still displayed, and you can adjust your forms if you don't like the report you got. All of this is written in ColdFusion.

There is Javascript to direct the focus in all 3 programs, and it is working fine.

In Pers3 it is possible to click on the heading of the report and have the Pers1 and Pers2 forms hidden. This permits the user to print the report without the preceding forms. To get Pers1 and Pers2 displayed again, you click the heading in Pers3 again.

All is working well except that when I click the heading to get back Pers1 and Pers2, I lose the focus in Pers3. I've tried lots of things, but so far no success. The Javascript to switch Pers1 and 2 on and off, including my attempt to refocus (there are 3 divs which have to be shut off/on here):

function hider() {

var buttonrep2 = document.getElementById('shutoff'); 
var buttonrep1 = document.getElementById('hiderep1');
var buttontop = document.getElementById('hidereptop');

      if(buttonrep2.style.display != 'none' ) {
         buttonrep2.style.display = 'none';} //shut off

      else {
             buttonrep2.style.display = ''; }//turn on

      if(buttonrep1.style.display != 'none' ) {
         buttonrep1.style.display = 'none';}

      else {

             buttonrep1.style.display = '';}


      if(buttontop.style.display != 'none' ) {
         buttontop.style.display = 'none';}

      else {
             buttontop.style.display = ''};                

 thefocus('reporthead')
}//end of function hider

And to refocus, which is working fine everywhere else:

  function thefocus(id) {   
  document.getElementById(id).focus();
  }

Does anyone have an idea what I might be doing wrong, or how to get this working?

Upvotes: 0

Views: 94

Answers (1)

srquinn
srquinn

Reputation: 10481

You can focus on non-input elements if you give your HTML a tabindex attribute like so:

<h1 tabindex="0" id="reportHead">Report Header</h1>

And then you can use

document.getElementById('reportHead').focus();

Upvotes: 1

Related Questions