Using javascript to check the focus of an element

  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1893
  • Loc: Las Vegas

Post 3+ Months Ago

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?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • knexor2
  • Proficient
  • Proficient
  • User avatar
  • Posts: 445
  • Loc: US

Post 3+ Months Ago

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:

Code: [ Select ]
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;
    };
}
}
  1. window.onload = function() {
  2. for (i=0; i<form.elements.length-1; i++) {
  3.     elem = document.forms['quick_reply'].elements[i];
  4.     elem.focused = false;
  5.     elem.hasFocus = function() {
  6.         return this.focused;
  7.     };
  8.     elem.onfocus=function() {
  9.         this.focused=true;
  10.     };
  11.     elem.onblur=function() {
  12.         this.focused=false;
  13.     };
  14. }
  15. }


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
  • krismeister
  • Graduate
  • Graduate
  • krismeister
  • Posts: 202

Post 3+ Months Ago

Thats some nice code. It's crazy how JavaScript lets you assign properties to anything you want. Very Cool!
  • knexor2
  • Proficient
  • Proficient
  • User avatar
  • Posts: 445
  • Loc: US

Post 3+ Months Ago

krismeister wrote:
Thats some nice code.


Thank you :D

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


It is, and it is :lol: very useful at times.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

What about this ?

Code: [ Select ]
<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>
  1. <style type="text/css">
  2. input, select, textarea, label, button {
  3.   background-color: #FFF;
  4. }
  5. input:focus, select:focus, textarea:focus, label:focus, button:focus {
  6.   background-color: #FEFEFE;
  7. }
  8. </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.
  • tivrfoa
  • Born
  • Born
  • tivrfoa
  • Posts: 2

Post 3+ Months Ago

joebert wrote:
What about this ?

Code: [ Select ]
<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>
  1. <style type="text/css">
  2. input, select, textarea, label, button {
  3.   background-color: #FFF;
  4. }
  5. input:focus, select:focus, textarea:focus, label:focus, button:focus {
  6.   background-color: #FEFEFE;
  7. }
  8. </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.

Very smart solution!!! =)
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

JQuery (excerpt from the API reference)

Quote:
focus(fn)
Binds a function to the focus event of each matched element.
The focus event fires when an element receives focus either via the pointing device or by tab navigation.


Code: [ Select ]
$("input[type=text]").focus(function(){
 $(this).blur();
});
  1. $("input[type=text]").focus(function(){
  2.  $(this).blur();
  3. });


Code: [ Select ]
$("input").focus(function () {
     $(this).next("span").css('display','inline').fadeOut(1000);
  });
  1. $("input").focus(function () {
  2.      $(this).next("span").css('display','inline').fadeOut(1000);
  3.   });

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 56 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.