469,643 Members | 2,035 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,643 developers. It's quick & easy.

label for object

We have a massive java application to be made ADA compliant. We want onfocus
and onblur events for each text field. The best way seems to be javascript,
by cycling through all the nodes recursively after page load, and attaching
the events. We already cycle through everything to set tabs. If nodename is
LABEL, we should be able to use the FOR attribute, get the object
referenced, and attach events on that object.

When cycling through nodes, if I get to a label I can print the attribute
collection, and there is a FOR having the correct value for the associated
text object. I can't get any further than that.

This is a piece of code:

if (child.nodeName=='LABEL') {
//var sss = ''+child.attributes.length+"\n";
//for (var k=0;k<child.attributes.length;k++) sss +=
''+child.attributes[k].nodeName+'='+child.attributes[k].nodeValue+"\n";
//alert(sss);
try {
var cont = child.attributes.getNamedItem("for");
alert(''+cont.nodeName);
cont.attachevent('onfocus',alert("xxx"));
cont.attachevent('onblur',alert("zzz"));
}
catch (e) {
}
}

Maybe by reading the code you can see what I'm trying to do. When it
executes "alert(''+cont.nodeName);", it displays "for". I need to display
"textarea" because that's what the label is associated with. If anyone can
help I'd appreciate it.

Jul 23 '05 #1
8 4311
VK
cont.nodeValue will give you the object ID (but *not* the reference).
So you need to:

var cont = child.attributes.getNamedItem(*"for");
var obj = document.getElementById(cont.nodeValue);
// attachEvent, not attachevent - case makes difference:
obj.attachEvent('onfocus',ale*rt("xxx"));
obj.attachEvent('onblur',aler*t("zzz"));

I predict a big mess though because label and textbox are sharing the
same event stream (thus clicking on label will trig 'onclick' for
associated textbox either).
So it's going to be a bunch of dublicate events you'll have to kill
with returnValue=null;

Jul 23 '05 #2
VK
> kill with returnValue=null;

returnValue=false;

or by checking event.srcElement.tagName ("LABEL" or "INPUT") every time.

Jul 23 '05 #3
Yep
David McDivitt wrote:

Hi,
We have a massive java application to be made ADA compliant. We want onfocus
and onblur events for each text field. The best way seems to be javascript,
by cycling through all the nodes recursively after page load, and attaching
the events. We already cycle through everything to set tabs. If nodename is
LABEL, we should be able to use the FOR attribute, get the object
referenced, and attach events on that object.

<style type="text/css">
label input[type=text] {background-color:#ccc;}
</style>

<form>
<label for="foo1"><input type="text" id="foo1"></label>
<label for="foo2"><input type="text" id="foo2"></label>
<label for="foo3"><input type="text" id="foo3"></label>
</form>

<script type="text/javascript">
var Utils = {

//getElementsWithTagName
getElementsWithTagName : function(root, tag) {
var d=document, func, fail=null;
if(d.all) {
func = function(root, tag) {
return root && tag &&
(tag=="*" ? root.all : root.all.tags(tag)) || fail;
}
} else if(d.getElementsByTagName) {
func = function(root, tag) {
return root && tag && root.getElementsByTagName(tag) || fail;
}
} else {
func = function(){return fail;}
}
return (Utils.getElementsWithTagName = func)(root, tag);
},

//getElementWithId
getElementWithId : function(id) {
var d=document, func, fail=null;
if(d.getElementById) {
func = function(id) {return d.getElementById(id);}
} else if(d.all) {
func = function(id) {return d.all[id]; }
} else {
func = function() {return fail;}
}
return (Utils.getElementWithId = func)(id);
},

//addEventListener
addEventListener : function(obj, evt, handler) {
var d=document, func;
if(d.addEventListener) {
func = function(obj, evt, handler) {
evt=evt.replace(/^on/i,"").toLowerCase();
obj.addEventListener(evt, handler, false);
}
} else {
func = function(obj, evt, handler) {
evt="on"+evt.replace(/^on/i,"").toLowerCase();
obj[evt]=handler;
}
}
return (Utils.addEventListener = func)(obj, evt, handler);
}
};

function initLabels() {
var labels=Utils.getElementsWithTagName(document.body, "label");
if(labels){
for(var ii=labels.length; ii--;) {
var target=Utils.getElementWithId(labels[ii].htmlFor);
if(target && target.type.toLowerCase()=="text") {
Utils.addEventListener(target, "onfocus", focusHandler);
Utils.addEventListener(target, "onblur", blurHandler);
}
}
}
function focusHandler(){this.style.backgroundColor="yellow" ;}
function blurHandler(){this.style.backgroundColor="";}
}

Utils.addEventListener(window, "onload", initLabels);
</script>
HTH,
Yep.

Jul 23 '05 #4
YD
David McDivitt a écrit :
We have a massive java application to be made ADA compliant. We want onfocus
and onblur events for each text field. The best way seems to be javascript,
by cycling through all the nodes recursively after page load, and attaching
the events. We already cycle through everything to set tabs. If nodename is
LABEL, we should be able to use the FOR attribute, get the object
referenced, and attach events on that object.
If you cycle through everything, why don't you attach events on the node named
'TEXTAREA'?
var cont = child.attributes.getNamedItem("for");


then cont is the attribute 'FOR' of the element you call child.
To achieve what you want, try:

var cont=document.getElementById(child.attributes.getN amedItem("for").nodeValue);

as the value of the FOR element is the id of the form element it refers.

HTH

--
Y.D.
Jul 23 '05 #5
>From: "VK" <sc**********@yahoo.com>
Subject: Re: label for object
Date: 8 Jun 2005 13:45:44 -0700

cont.nodeValue will give you the object ID (but *not* the reference).
So you need to:

var cont = child.attributes.getNamedItem(*"for");
var obj = document.getElementById(cont.nodeValue);
// attachEvent, not attachevent - case makes difference:
obj.attachEvent('onfocus',ale*rt("xxx"));
obj.attachEvent('onblur',aler*t("zzz"));

I predict a big mess though because label and textbox are sharing the
same event stream (thus clicking on label will trig 'onclick' for
associated textbox either).
So it's going to be a bunch of dublicate events you'll have to kill
with returnValue=null;


Thanks VK. YD helped, too.

What I have now is:

if (child.nodeName=='LABEL') {
try {
var cont = child.attributes.getNamedItem("for");
var obj = document.getElementById(cont.nodeValue);
alert(''+obj.nodeName); //says INPUT or TEXTAREA, good
obj.attachEvent("onfocus",alert("xxx"));
obj.attachEvent("onblur",alert("zzz"));
}
catch (e) {
}
}

What should be the onfocus event executes while the javascript is running,
so I get several xxx alert boxes. Clicking on the textarea does not generate
an onfocus. In reading documentation for attachEvent, I don't know if syntax
allows arguments.

When finished it will be something like:

if (child.nodeName=='LABEL') {
try {
var cont = child.attributes.getNamedItem("for");
var obj = document.getElementById(cont.nodeValue);
obj.attachEvent("onfocus",window.status=<label text>);
obj.attachEvent("onblur",window.status='');
}
catch (e) {
}
}

Doing this will save endless man hours. All we have to do is put label tags
on all the pages. We are using the struts framework. The id of text, input,
textarea, etc., is set with the styleId attribute in the <HTML:WHATEVER
struts tag, and that matches FOR in the label tag.

Jul 23 '05 #6
David McDivitt wrote:

Hi,
obj.attachEvent("onfocus",alert("xxx"));


obj.attachEvent("onfocus", functionRef);

The second argument should be a function reference, like

function funcRef(){window.status=""}
FYI, your using try/catch and attachEvent limits your application to IE
on intranets, which may or not be fine to you.
HTH,
Yep.
Jul 23 '05 #7
VK
attachEvent() supports anonymous function call:
obj.attachEvent('onfocus', function(args){body;});

*But* it will lead to the circular reference memory leak in IE:
<http://support.microsoft.com/default.aspx?scid=kb;en-us;830555>
(say thank you to Martin Honner, Matt Kruz and Co who pulled out this
not so well known bug).

On your scale (> "We have a massive java application") this leak may
eventually crash the system.

The only way to secure your memory on IE is to use pure function
references. Also if you guarantee that you need one function call per
event and this call is static (will not be altered/canceled later), you
are free to use universal property set instead of attachEvent:
obj.onfocus = f1;
obj.onblur = f2;

The trick is to store the LABEL object reference in the INPUT object.
This solves all your problem:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script>
<!-- BHW: ADA also requires to not lock users to a partucular platform
and software.
So could we be a bit more cross-browser friendly? ;-) Like this
code. -->
function init() {
var arr = document.getElementsByTagName('LABEL');
var len = arr.length;
var txt = null;
for (i=0; i<len; i++) {
txt = document.getElementById((arr[i].htmlFor));
txt.thisLabel = arr[i];
txt.onfocus = f1;
txt.onblur = f2;
}
}
function f1(e) {
var obj = (e)? e.target.thisLabel : event.srcElement.thisLabel;
obj.style.color='red';
}
function f2(e) {
var obj = (e)? e.target.thisLabel : event.srcElement.thisLabel;
obj.style.color='black';
}
window.onload = init;
</script>
</head>

<body bgcolor="#FFFFFF">
<form>
<label id="oLbl" for="oTxt1" accesskey="1">Label <u>1</u>:</label>
<input type="text" id="oTxt1">
<label id="oLb2" for="oTxt2" accesskey="2">Label <u>2</u>:</label>
<input type="text" id="oTxt2">
</form>
</body>
</html>

The posted code is the most resource/time wise. But if you need to
iterate through the DOM nodes anyway for other reasons, then just keep
your approach.

Jul 23 '05 #8
>From: "VK" <sc**********@yahoo.com>
Subject: Re: label for object
Date: 9 Jun 2005 02:14:05 -0700

attachEvent() supports anonymous function call:
obj.attachEvent('onfocus', function(args){body;});

*But* it will lead to the circular reference memory leak in IE:
<http://support.microsoft.com/default.aspx?scid=kb;en-us;830555>
(say thank you to Martin Honner, Matt Kruz and Co who pulled out this
not so well known bug).

On your scale (> "We have a massive java application") this leak may
eventually crash the system.

The only way to secure your memory on IE is to use pure function
references. Also if you guarantee that you need one function call per
event and this call is static (will not be altered/canceled later), you
are free to use universal property set instead of attachEvent:
obj.onfocus = f1;
obj.onblur = f2;

The trick is to store the LABEL object reference in the INPUT object.
This solves all your problem:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script>
<!-- BHW: ADA also requires to not lock users to a partucular platform
and software.
So could we be a bit more cross-browser friendly? ;-) Like this
code. -->
function init() {
var arr = document.getElementsByTagName('LABEL');
var len = arr.length;
var txt = null;
for (i=0; i<len; i++) {
txt = document.getElementById((arr[i].htmlFor));
txt.thisLabel = arr[i];
txt.onfocus = f1;
txt.onblur = f2;
}
}
function f1(e) {
var obj = (e)? e.target.thisLabel : event.srcElement.thisLabel;
obj.style.color='red';
}
function f2(e) {
var obj = (e)? e.target.thisLabel : event.srcElement.thisLabel;
obj.style.color='black';
}
window.onload = init;
</script>
</head>

<body bgcolor="#FFFFFF">
<form>
<label id="oLbl" for="oTxt1" accesskey="1">Label <u>1</u>:</label>
<input type="text" id="oTxt1">
<label id="oLb2" for="oTxt2" accesskey="2">Label <u>2</u>:</label>
<input type="text" id="oTxt2">
</form>
</body>
</html>

The posted code is the most resource/time wise. But if you need to
iterate through the DOM nodes anyway for other reasons, then just keep
your approach.


Thanks VK! You made my day. I adapted my code and it works perfect.

Jul 23 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Stuart Norris | last post: by
31 posts views Thread by jcrouse | last post: by
9 posts views Thread by =?Utf-8?B?RnJhbmsgVXJheQ==?= | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.