Coloring the fieldname when the cursor is placed in an input box

**jason_kelly** · 05-09-2013, 02:59 PM

Hello,

I need your help,

How can I use javascript to automatically change the color of the field name (in red) above each of the input textboxes once the cursor has been placed or clicked in the textbox.

Then if a new textbox is selected, it will revert the previous selected field to its default color (black) and color the newly selected field name?

Code:

<!DOCTYPE html>

<html>

<head></head>

<body>

<table border="0" cellspacing="0" width="100%" id="table1">
    <tr>
        <td>FIELD1</td>
        <td>FIELD2</td>
        <td>FIELD3</td>
    </tr>
    <tr>
        <td><input type="text" id="field1"/></td>
        <td><input type="text" id="field2"/></td>
        <td><input type="text" id="field3"/></td>
    </tr>
</table>

</body>

</html>

**jscheuer1** · 05-09-2013, 03:48 PM

Code:

<!DOCTYPE html>

<html>

<head></head>

<body>

<table border="0" cellspacing="0" width="100%" id="table1">
    <tr>
        <td>FIELD1</td>
        <td>FIELD2</td>
        <td>FIELD3</td>
    </tr>
    <tr>
        <td><input type="text" id="field1"/></td>
        <td><input type="text" id="field2"/></td>
        <td><input type="text" id="field3"/></td>
    </tr>
</table>
<script type="text/javascript">
(function(){
	var table = document.getElementById('table1'), inputs = table.getElementsByTagName('input'), names = table.rows[0].cells,
	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;};
	})(), i = inputs.length;
	while(--i > -1){
		inputs[i].setAttribute('data-index', i);
		addEvent(inputs[i], 'focus', function(){
			var i = names.length;
			while(--i > -1){
				names[i].style.color = '';
			}
			names[this.getAttribute('data-index')].style.color = 'red';
		});
	}
})();
</script>
</body>
</html>

**jason_kelly** · 05-09-2013, 03:50 PM

Wow!

Crazy complicated coding...was definetly beyond my comfort level.

As usual a job well done and a huge thank you.

Please send the bill in the mail

Cheers,

Jay

**vwphillips** · 05-09-2013, 03:57 PM

Code:

<!DOCTYPE html>

<html>

<head>
<script type="text/javascript">
/*<![CDATA[*/

function Field(id,n){
 var tr=document.getElementById(id),tds=tr?tr.getElementsByTagName('TD'):[];
 Field.lst?Field.lst.style.color='black':null;
 tds[n]?tds[n].style.color='red':null;
 Field.lst=tds[n];
}
/*]]>*/
</script>
</head>

<body>

<table border="0" cellspacing="0" width="100%" id="table1">
    <tr id="field" >
        <td>FIELD1</td>
        <td>FIELD2</td>
        <td>FIELD3</td>
    </tr>
    <tr>
        <td><input type="text" id="field1" onfocus="Field('field',0);" onblur="Field('field');"/></td>
        <td><input type="text" id="field2" onfocus="Field('field',1);"/></td>
        <td><input type="text" id="field3" onfocus="Field('field',2);"/></td>
    </tr>
</table>

</body>

</html>

**jason_kelly** · 05-09-2013, 04:53 PM

Thanks again for your coding Vic.

Light weight and versatile. I can understand exactly whats going on .... to a degree lol

I guess there is more than one way to skin a cat!

Cheers and have an awesome day.

Jay.