Back To Programming / Scripting / Coding Forum

Using javascript to check the focus of an element

  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Jul 06, 2004
  • Posts: 1890
  • Loc: Las Vegas
  • Status: Offline

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

Post May 3rd, 2007, 9:36 am

  • knexor2
  • Proficient
  • Proficient
  • User avatar
  • Joined: May 27, 2006
  • Posts: 445
  • Loc: US
  • Status: Offline

Post 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:

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
"People can school you, but you must educate yourself." ~ John Taylor Gatto
Tech Knack Blog
The purpose of these forums is not to get an answer, but to learn an answer.
  • krismeister
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Oct 21, 2006
  • Posts: 202
  • Status: Offline

Post 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!
  • knexor2
  • Proficient
  • Proficient
  • User avatar
  • Joined: May 27, 2006
  • Posts: 445
  • Loc: US
  • Status: Offline

Post May 3rd, 2007, 6:29 pm

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.
"People can school you, but you must educate yourself." ~ John Taylor Gatto
Tech Knack Blog
The purpose of these forums is not to get an answer, but to learn an answer.
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post May 5th, 2007, 3:38 am

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
  • No Avatar
  • Joined: Oct 19, 2009
  • Posts: 2
  • Status: Offline

Post October 19th, 2009, 4:56 pm

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
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post October 22nd, 2009, 5:35 pm

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.   });
I'd love to change the world, but they won't give me the source code.

Page 1 of 1

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 208 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.