Results 1 to 3 of 3

Thread: Change label color on input focus

  1. #1
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default Change label color on input focus

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    <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):

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

    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="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>
    Last edited by jscheuer1; 06-07-2012 at 10:01 PM. Reason: add more code
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Rain Lover (06-08-2012)

  4. #3
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default

    previousSibling is a clever idea!
    Many thanks for the solutions and notes!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •