PDA

View Full Version : 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?



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