input field bgcolor change method Q

[[o_O]]

I've made it so that when you click inside the input field the background changes color. What i want to know is if this is the best way to do it or if i should use a sfunction etc.

at the moment:

<input type="text" name="name" size="14" class="npt" onFocus="this.style.backgroundColor='#FFFFFF';" onBlur="this.style.backgroundColor='#F0F0F0';">


it works but is there a better way :confused:

[Mhtml]

Well to make updating easier, like if you decide to change the color why not use className?


<style>
.npt {
background-color:#F0F0F0;
}

.inputFocus {
background-color:#FFFFFF;
}
</style>
<input type="text" name="name" size="14" class="npt" onFocus="this.className='inputFocus';" onBlur="this.className='npt';">


You also get the added advantage of not having to type so much.
The same goes for if you were using a function.


<script language="javascript">
function changeBgColor(theField) {
theField.style.backgroundColor = '#FFFFFF';
}

function changeBgBack(theField) {
theField.style.backgroundColor = '#F0F0F0';
}
</script>
<input type="text" name="name" size="14" class="npt" onFocus="changeBgColor(this)" onBlur="changeBgBack(this)">


Both ways have good and bad points but I think that they even out. :)
Go for one of those ways though, the first way you were using would be just consuming to much time if you have a large number of fields.

[[o_O]]

O.k :)