setting focus 1

[cisco999]

This script sets the focus to the first input field on a form using the For-Loop but I would appreciate if someone could explain how this script works? I haven’t seen a script put together like this, is there a name for this technique? Thanks much!

<script name="setFocus" language="JavaScript">
(function () {
var prev = window.onload;
window.onload = function() {
prev && prev();
for (var i = 0; i < document.findForm.elements.length; i++) {
if ((document.findForm.elements.type == 'text' && document.findForm.elements.disabled == false) || document.findForm.elements.type == 'select') {
document.findForm.elements.focus();
return;
}
}
}
}
)();
</script>

 

[dwarfthrower]

 <!-- This is the Script tag that tells the browser that the text in between is executable code rather than marked up text -->
 <script name="setFocus" language="JavaScript">
  //create a new function
  (function () {
     // get a handle to any existing function attached to
     // the window's onload event
     var prev = window.onload;
     // define a new function and set the window's onload
     // event to call it
     window.onload = function() {
        //call the prior existing function if there was one
        prev && prev();
         // loop through the elements of the form named 
         // "findForm" and get the first one that is either:
         // a text input that is not disabled, or,
         // a select control
         for (var i = 0; i < document.findForm.elements.length; i++) {
            if ((document.findForm.elements[i].type == 'text' && document.findForm.elements[i].disabled == false) || document.findForm.elements[i].type == 'select')  {
                  // Call the element's focus() method
                  document.findForm.elements[i].focus();
                  // exit out of the function
                  return;
               }
        }
     }
  }
  )();
  </script>

I'm not sure what you mean by a "name" for the technique.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Enable Apps

 

[cisco999]

What does the 'prev()' do? The initial prev calls the original onload process but the '&& prev()' is unclear.
//call the prior existing function if there was one
prev && prev();

 

[dwarfthrower]

OK, prior to that the function sets the value of [tt]prev[/tt] to whatever the window's [tt]onload[/tt] event happens to be.
As far as the code knows, there might be a function there, there might not be. If not, [tt]window.onload[/tt] will be null, therefore [tt]prev[/tt] will be set as null.
The line:

prev && prev();

Can be read as:

AND together the existence of the window.onload function and the outcome of executing that function.

That way, if there is no [tt]window.onload[/tt] function already set, and [tt]prev[/tt] is null we won't get an error thrown when we try to call [tt]prev()[/tt]. Because [tt]AND[/tt] operations logically fail out on the first failing clause they encounter. So interestingly enough, swapping the terms around:

prev() && prev;

would yield erratic results, working fine if there was a prior [tt]onload[/tt] function specified but throwing an error if there wasn't.
Another way of achieving the same functionality would be to explicitly check that [tt]prev[/tt] was not null prior to attempting to call it:

if(prev != null){
  prev();
}

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Enable Apps

 

[cisco999]

Thanks very much! That's makes more sense.

My next issue is that this only seems to work on the initial page load. When the user proceeds to the next page and then comes back to the original page the focus is not set. Any thoughts?

 

[dwarfthrower]

Hmm... I know that some browsers (like FF2 for example) will return you to a page how you left it. For example, as I was typing this response I clicked on a forum in my threadminder, then hit the back button and the page was reloaded scrolled down to the bottom with my first sentence still typed in the text box. I'd imagine that something similar might be happening to your users.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Enable Apps