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