homepage Welcome to WebmasterWorld Guest from 54.198.9.77
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Change label color on input focus
Rain_Lover




msg:4462595
 6:23 pm on Jun 7, 2012 (gmt 0)

Hi,

Here's a sample form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample Form</title>
</head>
<body>
<form action="#">
<label for="fname">First name</label><input type="text" id="fname">
<br>
<label for="lname">Last name</label><input type="text" id="lname">
</form>
</body>
</html>


I wonder how I can change the label color when I focus/tab on its text filed? How can I do it through JavaScript if CSS doesn't work here?

Thanks in advance!
Mike

 

DrDoc




msg:4462616
 7:47 pm on Jun 7, 2012 (gmt 0)

If you are using jQuery, it's quite easy, since it allows you to check for previous siblings of a given type with minimal effort.

Otherwise, simply wrap your
<label> _around_ your input, and change the background of the parent node.
birdbrain




msg:4462855
 9:51 am on Jun 8, 2012 (gmt 0)

Hi there Rain_Lover,

as CSS seems to be ineffective for this task, try this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Sample Form</title>

<style type="text/css">
.focused {
background-color:#fdb;
}
</style>

<script type="text/javascript">

function init(){
inp=document.getElementsByTagName('input');
for(c=0;c<inp.length;c++){
inp[c].onfocus=function() {

if(this.previousSibling.nodeName=='LABEL'){

this.previousSibling.className='focused';

this.onblur=function() {
this.previousSibling.className='';
}
}
}
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);

</script>

</head>
<body>

<form action="#">
<label for="fname">First name</label><input type="text" id="fname">
<br>
<label for="lname">Last name</label><input type="text" id="lname">
</form>

</body>
</html>

birdbrain

Fotiman




msg:4462940
 1:41 pm on Jun 8, 2012 (gmt 0)

A better method might be to look for the label element that has the for attribute that matches the input's id attribute. That way, it's not dependent on a rigid layout and you won't need to worry if you ever change your markup.


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.focused {
background-color: #fdb;
}
</style>
<title>Sample Form</title>
</head>
<body>
<form action="#">
<div>
<div><label for="fname">First name</label><input type="text" id="fname"></div>
<div><label for="lname">Last name</label><input type="text" id="lname"></div>
</div>
</form>
<script>
(function () {
var i,
j,
inputEls = document.getElementsByTagName('input'),
labelEls = document.getElementsByTagName('label');

function attachFocusHandler(inputEl, labelEl) {
inputEl.onfocus = function () {
labelEl.className = labelEl.className + ' focused';
};
inputEl.onblur = function () {
labelEl.className = labelEl.className.replace('focused', '');
};
}

for (i = 0; i < inputEls.length; i++) {
for (j = 0; j < labelEls.length; j++) {
if (inputEls[i].id === labelEls[j].getAttribute("for")) {
attachFocusHandler(inputEls[i], labelEls[j]);
break;
}
}
}
})();
</script>
</body>
</html>

[edited by: Fotiman at 1:43 pm (utc) on Jun 8, 2012]

Rain_Lover




msg:4462941
 1:42 pm on Jun 8, 2012 (gmt 0)

Works like a charm! Thanks for your time! :)

Rain_Lover




msg:4462958
 2:15 pm on Jun 8, 2012 (gmt 0)

Fotiman and I were posting at the same time. LOL!
My sincere thanks goes to both of you! Now I have good ideas for my real form.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved