Determining if a select element is the focus

@kessaMar 27.2006

Hi All,

I’m trying to write by first by of javascript code from scratch (EEK!!), but in addition, I’m trying to teach myself javascript which just uses the DOM (I like a challenge :rolleyes: )

Anyway, I’ve got a little bit stuck and wondered if someone may be able to help me?

I’m trying to detect whether a ~~[B]~~select[/B] element has the focus by using the elements ID. I’ve tried loads of different combinations / solutions but I can’t seem to get anthing to work.

Here’s my latest attempt:

~~[COLOR=SlateGray]~~// declare the variables[/COLOR]
~~[COLOR=Navy]~~var country = document.getElementById(“country”);
var countrylbl = document.getElementsByTagName(“label”)[0];
var region = document.getElementById(“region”);
var regionlbl = document.getElementsByTagName(“label”)[1];[/COLOR]~~[COLOR=SlateGray]~~// set up the function[/COLOR]
~~[COLOR=Navy]~~function setRegion()
{[/COLOR]
~~[COLOR=SlateGray]~~// if the country has the focus[/COLOR]
~~[COLOR=Navy]~~country.focus();[/COLOR]
~~[COLOR=SlateGray]~~// to see if the above worked, I’ve currently just colouring the region label red[/COLOR]
~~[COLOR=Navy]~~regionlbl.style.color=”red”;
}[/COLOR]

I’ve also tried to use if statements, but still no joy.

Plus, all of the tutorials and examples I’ve come across all seem to use inline J/S and I’m trying to use unobtrusive J/S (with no inline stuff).

If anyone can help me get over this hurdle it would be really appreciated.

Thanks
Kessa

to post a comment

JavaScript

6 Comments(s) _↴

@phpnoviceMar 28.2006 — #I'm trying to detect whether a [B]select[/B] element has the focus by using the elements ID.[/QUOTE]
There is no DOM method for doing that. You have to create a global variable and save a pointer to the element as it gets the focus -- using the [b]onfocus[/b] event.

@KramyMar 28.2006 — #Hi, I'm new to Javascript too, but just thought I should mention something.

http://www.w3schools.com/htmldom/dom_obj_document.asp says that getElementsByTagName() isn't W3C. If you're trying to learn absolutely proper Javascript, then you might want to name those labels and use getElementsByName().

A good example is here: http://www.w3schools.com/tags/tag_label.asp

[code=html]<p>Try clicking on the text labels:</p>
 <form name="input" action="">
 <input type="radio" name="sex" id="male" />
 <label for="male">Male</label>
 <br />
 <input type="radio" name="sex" id="female" />
 <label for="female">Female</label>
 </form>[/code]

Use IDs for specific elements, and Names for arrays of those. ? Oh, and ignore those slashes unless you're writing XHTML.

What php said about onFocus is true, but if you're clever you'll be able to make a single function that manipulates the style of any element passed to it(or does whatever you require).

@gphMar 28.2006 — #Kramy, I can't tell you why that says "No" for W3C at w3schools but it's in the [url=http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-A6C9094]spec[/url]

Just so you know, getElementsByTagName and getElementsByName are DOM not JavaScript. The DOM is available to any language that can access it.

@KramyMar 28.2006 — #Ahh, neat. It seemed odd to me such a useful piece of "DOM" wouldn't be acceptable, so it was positive that I mentioned it, even if it's wrong. ?

I don't distinguish between DOM/Javascript. Javascript seems to be the most common language used in pages, and apparently DOM is mixed right in with javascript.

To me DOM is a way of organizing data and elements to create a document or page. Having DOM support would mean the browser supports the same attributes for each element, and the same memory changes. To not have DOM support would be like analyzing HTML to render a static image. DOM allows parts of a page to do things or be updated without having a drastic effect on anything else in the page. Javascript is the device you go through to manipulate it. If page manipulating were not required, there would be no reason to retain many internal stats and settings for everything on the page. Perhaps that is wrong?

Boy, it's a good thing I didn't build the Firefox rendering engine. :rolleyes:

@kessaauthorMar 28.2006 — #Hi All,

Thanks for all of your replies so far. ?

PHPnovice - re:

There is no DOM method for doing that. You have to create a global variable and save a pointer to the element as it gets the focus -- using the onfocus event.[/QUOTE]

Sorry,not sure if I follow... are you saying that you can't do it without using inline javascript? If so, that's a shame as I thought the whole point of the DOM was to allow you to seperate scripting from content, in the same way that CSS seperates styles from content (at least, that's what Jeremy Keith's DOM scriptng book says. ? )

If not, could you provide a example of what you mean?

Also, from what I've been reading, the "onfocus" event is being phased out in favour of the DOM focus event and so I'm trying not to use it, if at all possible....

That said, eveything I read seems to say something different so I'm not quite sure what is correct / the most up to date - I have seen examples where the focus has been removed from the HTML but no examples with the select box so if anyone can provide any examples of this, that would be cool.

Alternatively - I guess I could use the onChange (but again, it would need to be the DOM equivalent if there is one?)

Thanks

Kessa

@phpnoviceMar 28.2006 — #Sorry,not sure if I follow... are you saying that you can't do it without using inline javascript? [/QUOTE]
Nope. Anything that can be done in-line can be done using completely separate script.

<i>
 </i>var currentFormElement = null;
 //
 function captureCurrentElement() {
 currentFormElement = this;
 return true;
 }
 window.onload = function () {
 var formElements = document.forms["formName"].elements;
 var x, len = formElements.length;
 for (x=0; x&lt;len; ++x) {
 if (formElements[x].focus) {
 formElements[x].onfocus = captureCurrentElement;
 }
 }
 return true;
 }

Also in #JavaScript _↴

innerHTML Not Displaying Hide Browser Navigation pane (standard buttons, address bar) and view in full screen Read url using JavaScript

Success!

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

Tweet This

Determining if a select element is the focus

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Determining if a select element is the focus

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴