Change label color on input focus

Rain Lover · 06-07-2012, 07:13 PM

Hi,

Here's a sample form:

Code:

<!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

jmrker · 06-07-2012, 09:13 PM

See if this meets your needs ...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample Form</title>
<style type="text/css">

</style>
</head>
<body>
<form action="#" onsubmit="return false">
<label for="fname">First name
 <input type="text" id="fname"
 onfocus="this.style.backgroundColor='orange'"
 onblur="this.style.backgroundColor='white'"></label>
<br>
<label for="lname">Last name
 <input type="text" id="lname"
 onfocus="this.style.backgroundColor='orange'"
 onblur="this.style.backgroundColor='white'"></label>
</form>
</body>
</html>

EpicWebDesign · 06-07-2012, 09:16 PM

Here's a quick & dirty method, but it should at least point you in the right direction:

HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample Form</title>
<script type="text/javascript" src="label.js"></script>

</head>
<body>
<div id="wrapper">
<form action="#">
<label for="fname" id="label1" style="color:#000000;">First Name:</label> &nbsp;<input type="text" id="fname" onFocus="changeLabel(1); ">
<br>
<label for="lname" id="label2" style="color:#000000;">Last Name:</label> &nbsp;<input type="text" id="lname"  onFocus="changeLabel(2);">
</form>
</div>
</body>
</html>

JS (label.js):

Code:

function changeLabel(i) {

var newColor = document.getElementById("wrapper");
if (i == 1) {
 	document.getElementById("label1").style.color = "#C00000";
}
else {
	document.getElementById("label1").style.color = "#000000";
}
		
if (i == 2) {
 	document.getElementById("label2").style.color = "#C00000";
}
else {
	document.getElementById("label2").style.color = "#000000";
}


}

Obviously you can choose whatever colors you want, and even apply additional styling (bold, etc.) as desired.

jmrker · 06-09-2012, 01:27 AM

Why the cross-forum posts?
http://www.webdeveloper.com/forum/sh...31#post1210231

Rain Lover · 06-09-2012, 02:02 PM

Quote:

Originally Posted by jmrker

Why the cross-forum posts?
http://www.webdeveloper.com/forum/sh...31#post1210231

Two heads are better than one. IMHO consulting more people is always better than limiting yourself to a group. In addition, sometimes I haven't gotten even a single answer in a forum while there was a hot discussion in another.

Rain Lover · 06-09-2012, 02:04 PM

Quote:

Originally Posted by iBall

Inline javascript is generally frowned upon nowadays.

Here is one way without inline scripting.

Code:

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

        <script type="text/javascript">
            var inputsO = document.getElementById('myForm').getElementsByTagName('input');
            
            for(i=0; i<inputsO.length; i++){
                if(inputsO[i].nodeName.toLowerCase() == 'input' && inputsO[i].type.toLowerCase() == 'text'){
                   inputsO[i].onfocus = function(){setFocusColor(this.id)}
                   inputsO[i].onblur = function(){setBlurColor(this.id)}
                }
            }
            function setFocusColor(elemID){
                document.getElementById('lbl'+elemID).style.color = 'red';
            }
            function setBlurColor(elemID){
                document.getElementById('lbl'+elemID).style.color = 'black';
            }
        </script>
    </body>

Nice approach! Thank you!

jmrker · 06-09-2012, 02:33 PM

Quote:

Originally Posted by iBall

<offTopic style="clarification">

I don't see the point of the question. There is nothing wrong with posting on multiple websites. It's not against any rules and I haven't seen a website that prohibits its members from posting elsewhere at teh same time. Even I do it

.

Why on earth would you want to restrict people to posting only on codingforums? People can post where they like.

Surely you're not assuming that every time you reply to a request for help on codingforums that the op has not posted anywhere else as well, are you?

I see lots of posts, especially from newbies, requesting the same help on multiple web sites. So why pick on this op? The world does not revolve around a single website

.

</offTopic>

I don't mind x-posts.
I would like it better if, once you get an acceptable solution, on any forum, that they be noticed so that others don't waste any more time trying to help you.

Alternate solutions are great. Even if they come from elsewhere.
Just give them a chance to be evaluated.