Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Change label color on input focus

Posted by: RainLover Jun 7 2012, 01:18 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

Posted by: Christian J Jun 7 2012, 06:20 PM

If the INPUT comes before LABEL:

CODE
<input type="text" id="fname"><label for="fname">First name</label>

you might use this:

CODE
input:focus + label {color: red;}

Otherwise you must use javascript, e.g.:

CODE
<label for="fname">First name</label><input type="text" id="fname"
onfocus="this.previousSibling.className='focus';"
onblur="this.previousSibling.className='';">

Note that there must be no linebreak or other whitespace between the LABEL and INPUT elements (since previousSibling would then apply to that whitespace node instead).

For convencience I also assume that you style the LABEL with a .focus class in a stylesheet.

Posted by: RainLover Jun 7 2012, 10:44 PM

QUOTE(Christian J @ Jun 7 2012, 06:20 PM) *

If the INPUT comes before LABEL:

CODE
<input type="text" id="fname"><label for="fname">First name</label>

you might use this:

CODE
input:focus + label {color: red;}

Otherwise you must use javascript, e.g.:

CODE
<label for="fname">First name</label><input type="text" id="fname"
onfocus="this.previousSibling.className='focus';"
onblur="this.previousSibling.className='';">

Note that there must be no linebreak or other whitespace between the LABEL and INPUT elements (since previousSibling would then apply to that whitespace node instead).

For convencience I also assume that you style the LABEL with a .focus class in a stylesheet.


Very beautiful! Perfect! :)
previousSibling is a clever idea. Is it correct coding to avoid inline java script:

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">
label {color:black;}
.focus {color:red;}
</style>
<script type="text/javascript">
function change(el) {
el.previousSibling.className = 'focus';
}
function back(el) {
el.previousSibling.className = '';
}
</script>
</head>
<body>
<form action="#">
<label for="fname">First name</label><input type="text" id="fname" onfocus="change(this);" onblur="back(this);">
<br>
<label for="lname">Last name</label><input type="text" id="lname" onfocus="change(this);" onblur="back(this);">
</form>
</body>
</html>

Posted by: Christian J Jun 8 2012, 11:06 AM

QUOTE(Christian J @ Jun 8 2012, 01:20 AM) *

If the INPUT comes before LABEL

In addition you might use CSS to make them switch place again:

CODE
form {position: relative;}

label {margin-right: 7em;}

input {
position: absolute;
left: 7em;
}

#fname:focus + label {color: red;}

<input type="text" id="fname">
<label for="fname">First name</label>

though I'm not sure such acrobatics are worth the effort just to avoid a little javascript.

Posted by: Christian J Jun 8 2012, 11:14 AM

QUOTE(RainLover @ Jun 8 2012, 05:44 AM) *

Is it correct coding to avoid inline java script:

That looks correct.

To separate things further you can put the focus and blur events in the script too, but then the script block must either appear after the form elements in the source or you must use an onload event (otherwise the script will not find the form elements).

Posted by: RainLover Jun 8 2012, 12:17 PM

QUOTE(Christian J @ Jun 8 2012, 11:14 AM) *

I'm not sure such acrobatics are worth the effort just to avoid a little javascript.


LOL! Yes, you're right. In addition it doesn't seem to work in some browsers, e.g. IE8.

QUOTE
To separate things further you can put the focus and blur events in the script too


I'd like to, but I have no idea how to do it. Would yo mind helping me with this as well?

Thanks again!

Posted by: Christian J Jun 8 2012, 03:14 PM

Maybe something like this?

CODE
function highlight(elem_id)
{
    var elem=document.getElementById(elem_id);
    elem.onfocus=function()
    {
        this.previousSibling.className='focus';
    }
    elem.onblur=function()
    {
        this.previousSibling.className='';
    }
}
highlight('fname');
highlight('lname');

Posted by: RainLover Jun 8 2012, 08:31 PM

QUOTE(Christian J @ Jun 8 2012, 03:14 PM) *

Maybe something like this?

CODE
function highlight(elem_id)
{
    var elem=document.getElementById(elem_id);
    elem.onfocus=function()
    {
        this.previousSibling.className='focus';
    }
    elem.onblur=function()
    {
        this.previousSibling.className='';
    }
}
highlight('fname');
highlight('lname');



You're so helpful! I really appreciate it! smile.gif

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)