/    Sign up×
Community /Pin to ProfileBookmark

Focus Pocus!!!

Copy linkTweet thisAlerts:
Oct 15.2004

Just curious about something. You can set the focus to elements, but can you determine what element HAS the focus. I.E. The cursor is in an input named input1. You click a button and call a function that knows that the focus was in input1 at the time of the click as opposed to the other elements(inputs etc) on the screen(form).
any thoughts would be appreciated. thanks in advance

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@JonaOct 15.2004 — [font=trebuchet ms]A few minor bugs and breakdowns, but it works (at least in Mozilla; haven't tried IE). It searches two-levels deep for a tag, so if it's any lower than that, it won't work for the individual element. (Since it applies it to all second-level elements [a link in a P tag, the FIELDSET element in a FORM tag].)[/font]

<i>
</i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en" dir="ltr"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;title&gt;Focus Pocus&lt;/title&gt;
&lt;script type="text/javascript"&gt;&lt;!--
var lFocus = null;
window.onload = function(){
var tags = document.body.childNodes;
for(i=0; i&lt;tags.length; i++){
var subs = document.body.childNodes[i].childNodes;
for(j=0; j&lt;subs.length; j++){
subs[j].onblur = function(){
lFocus = this;
}
}
}
}

<i> </i>function dumpFocus(){
<i> </i> var o = lFocus;
<i> </i> if(o != null){
<i> </i> if(o.tagName == "A"){
<i> </i> data = o.href+"n";
<i> </i> data+= o.title?o.title+"n":"";
<i> </i> data+= o.target?o.target+"n":"";
<i> </i> data+= o.id?o.id+"n":"";
<i> </i> data+= o.name?o.name:"";
<i> </i>} else if(o.tagName == "INPUT"){
<i> </i> data = o.name?o.name+"n":"";
<i> </i> data+= o.type?o.type+"n":"";
<i> </i> data+= o.id?o.id+"n":"";
<i> </i> data+= o.value?o.value:"";
<i> </i>} else {
<i> </i> data = o;
<i> </i>}
<i> </i> alert("The element that had focus ten seconds ago was a(n) "+o.tagName+" element, and it had the following information:rn"+data);
<i> </i>}
}
//--&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Focus Pocus&lt;/h1&gt;
&lt;p&gt;JavaScript demonstration of focus event handling. &lt;a href="#" title="Dummy link."&gt;Dummy link&lt;/a&gt;.&lt;/p&gt;
&lt;form action="" method="get"&gt;&lt;fieldset&gt;
&lt;legend&gt;Dummy Form&lt;/legend&gt;
&lt;label&gt;Dummy text: &lt;input type="text" name="dText"&gt;&lt;/label&gt;&lt;br&gt;
&lt;label&gt;Dummy button: &lt;input type="button" name="dBut" value="Button"&gt;&lt;/label&gt;&lt;br&gt;
&lt;label&gt;Get last focus: &lt;input type="button" value="Last focus" onclick="dumpFocus();"&gt;&lt;/label&gt;&lt;br&gt;
&lt;/fieldset&gt;&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@bbhmusicauthorOct 15.2004 — it throws error in IE, pretty sure it's the childNode thing, but it gave me a really good idea. thanks!!!! i'll try to get something done after lunch and post it so everyone can make fun if my bad code!!!! ?

thanks again, HUGH HELP!!!!!!
Copy linkTweet thisAlerts:
@JonaOct 15.2004 — [font=trebuchet ms]You're welcome.[/font]
Copy linkTweet thisAlerts:
@bbhmusicauthorOct 15.2004 — a few tweaks and i got exactly what i want. the select box comes up 'undefined' in netscape, but that's an issue for another time. ?

have to work in IE. anyhow here it is, if anyone wants to test and give comments about errors in other browsers etc.. i commented out a bunch of your code cause i didn't need it but i left it there cause it shows others how to grab all the info their hearts could desire.

Once again thanks alot Jona, tht was a great script!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en" dir="ltr">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Focus Pocus</title>

<script type="text/javascript">

var lFocus = null;

window.onload = function(){

var tags = document.focusPocus.elements;

for(i=0; i<tags.length; i++){

tags[i].onblur = function(){

lFocus = this;

}

}

}



function dumpFocus(){
var o = lFocus;
alert(o);
if(o != null){

data = o.name;
// if(o.tagName == "A"){
//data = o.href+"n";
//data+= o.title?o.title+"n":"";
//data+= o.target?o.target+"n":"";
//data+= o.id?o.id+"n":"";
// data+= o.name?o.name:"";
//} else if(o.tagName == "INPUT"){
// data = o.name?o.name+"n":"";
//data+= o.type?o.type+"n":"";
//data+= o.id?o.id+"n":"";
//data+= o.value?o.value:"";
//} else {
// data = o;
//}
alert("The element that had focus when you clicked the button was named "+data);
}
}

</script>

</head>

<body>

<h1>Focus Pocus</h1>

<p>JavaScript demonstration of focus event handling. <a href="#" title="Dummy link.">Dummy link</a>.</p>

<form name='focusPocus' action="" method="get"><fieldset>

<legend>Dummy Form</legend>

<label>Dummy text 1: <input type="text" name="dText1"></label><br>

<label>Dummy text 2: <input type="text" name="dText2"></label><br>

<label>Dummy text 3: <input type="text" name="dText3"></label><br>

<label>Dummy text 4: <input type="text" name="dText4"></label><br>

<label>Dummy text 5: <input type="text" name="dText5"></label><br>

<label>Dummy text 6: <input type="text" name="dText6"></label><br>

<label>Dummy text 7: <input type="text" name="dText7"></label><br>

<select name='sel'><option>1</option></select>

<label>Get last focus: <input type="button" name='last' value="Last focus" onclick="dumpFocus();"></label><br>
</fieldset></form>

</body>

</html>
×

Success!

Help @bbhmusic spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...