Jump to content

Simple hover over textfield and change text color.


Orionsbelter

Recommended Posts

Ok i am very new to javascript programming, and i'm currently looking for some help on how i can change text when i hover over a textfield

 

For example i have a login form with two rows which has a name an textfield:

 

Username : textfield

Password : textfield

 

Ok so i hover over the textfield of username and it changes the colour of the TEXT Username to red then when i hover out of the box it returns to it usual black.

 

This will need to be applied to both textfields

 

Please help me  :confused:

Well, I think you really want to be using onfocus/onblur, but I went ahead and wrote this using onmouseover and onmouseout since that is what you stated:

 

<html>
<head>
<script type="text/javascript">

function highlightLabel(fieldObj, labelColor)
{
   var labelObj = document.getElementById(fieldObj.id+'_label');
    labelObj.style.color = labelColor;
}

</script>
</head>

<body>
<label for="username" id="username_label">Username:</label>
<input type="text" id="username" name="username"
    onmouseover="highlightLabel(this, '#ff0000');" onmouseout="highlightLabel(this, '#000000');" />
<br />
<label for="password" id="password_label">Password:</label>
<input type="password" id="password" name="password"
    onmouseover="highlightLabel(this, '#ff0000');" onmouseout="highlightLabel(this, '#000000');" />
<br />
</body>
</html>

Thank you for this you are very kind, so should i change the onMouse to onBlur?

 

Depends. You said you want it to change color when the mouse hovers over the text field. If that is what you want then use onmouseover/out. But, typically I see that type of functionality for when the user selectes/enters the field.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.