PDA

View Full Version : Change label color on input focus



Rain Lover
06-07-2012, 06:14 PM
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

jscheuer1
06-07-2012, 09:11 PM
<!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>
<script type="text/javascript">
(function(){
var texts = document.getElementsByTagName('input'), t = texts.length;
while (texts[--t]){
if(texts[t].type === 'text'){
texts[t].onfocus = function(){
this.previousSibling.style.color = 'red';
};
texts[t].onblur = function(){
this.previousSibling.style.color = '';
};
}
}
})();
</script>
</body>
</html>

Notes: There can be no white space or other elements, comments, etc. between the label and the text input. There could be, but the code gets more complex. Or you can do as I have, add white space inside the label. Comments or inline elements could go there too, just not block level elements like div or p. And regardless, to avoid an error there has to be a label for each text input on the page. This also could be remedied with more code. One could use jQuery to do it more easily regardless of missing labels for some, extra white space and/or elements/comments intervening.

Here's a more robust javascript only solution (comments, other elements, missing labels, etc. won't matter):


<!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>
<script type="text/javascript">
(function(){
var focusColor = 'red',
texts = document.getElementsByTagName('input'), t = texts.length,
labels = document.getElementsByTagName('label'), l, label;
function findLabel(id){
l = labels.length;
while (labels[--l]){
if(labels[l].htmlFor === id){
return labels[l];
}
}
return false;
}
var addEvent = (function(){return window.addEventListener? function(el, ev, f){
el.addEventListener(ev, f, false);
}:window.attachEvent? function(el, ev, f){
el.attachEvent('on' + ev, function(){f.call(el);});
}:function(){return;};
})();
while (texts[--t]){
if(texts[t].type === 'text' && texts[t].id){
addEvent(texts[t], 'focus', function(){
if((label = findLabel(this.id))){
label.style.color = focusColor;
}
});
addEvent(texts[t], 'blur', function(){
if((label = findLabel(this.id))){
label.style.color = '';
}
});
}
}
})();
</script>
</body>
</html>

By contrast, to match all that in jQuery:


<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var focusColor = 'red';
$('input:text[id]').bind('focus blur', function(e){
$('label[for=' + this.id + ']').css({color: e.type === 'focus'? focusColor : ''});
});
});
</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>

Rain Lover
06-08-2012, 03:27 AM
previousSibling is a clever idea!
Many thanks for the solutions and notes! :)