Using javascript to check the focus of an element

May 3rd, 2007, 9:36 am

I'm having to parse a form to check attributes on each element. I'm using a loop to cycle through every element in the form, but one thing I'm having a problem with is determining if an element has focus or not. Does anyone know a way to determine if an element has focus without having to set up an onfocus on every input in the form?

May 3rd, 2007, 2:22 pm

What you mentioned (onfocus for each element) seems to be the only viable solution atm.

This shouldn't be too tedious with JS, though. Just set up a for loop with window.onload that iterates through the forms elements and adds an onfocus handler. The focused element could be stored in a global variable, or you could add a private member and method to the element. Something like:

Line number On/Off

Code: Select all

window.onload = function() {
for (i=0; i<form.elements.length-1; i++) {
   elem = document.forms['quick_reply'].elements[i];
   elem.focused = false;
   elem.hasFocus = function() {
      return this.focused;
   };
   elem.onfocus=function() {
      this.focused=true;
   };
   elem.onblur=function() {
      this.focused=false;
   };
}
}

Not sure how cross-browser that is, but it should work in theory.
And it works pretty well by an initial test here in FF2

May 3rd, 2007, 6:23 pm

Thats some nice code. It's crazy how JavaScript lets you assign properties to anything you want. Very Cool!

May 3rd, 2007, 6:29 pm

krismeister wrote:

Thats some nice code.

Thank you

krismeister wrote:

It's crazy how JavaScript lets you assign properties to anything you want. Very Cool!

It is, and it is very useful at times.

[joebert]

May 5th, 2007, 3:38 am

What about this ?

Line number On/Off

Code: Select all

<style type="text/css">
input, select, textarea, label, button {
   background-color: #FFF;
}
input:focus, select:focus, textarea:focus, label:focus, button:focus {
   background-color: #FEFEFE;
}
</style>

If an element has focus, the background with be a non-noticable shade darker.
backgroundColor is easily obtainable if I remember right.
Might be computedStyle.backgroundColor in some places.