Forum Moderators: open

Message Too Old, No Replies

OnFocus & OnBlur to change style Issue

         

Argblat

6:36 pm on Feb 14, 2005 (gmt 0)

10+ Year Member



Hello all,
My frankenstein-ish mixing and matching of assorted javascript codes I have found online has led me very close to the solution that I seek, however unlike the good Dr. F. , I am not quite so brilliant [in this case, with Javascript], and I require the help of a true genious.

The code below does almost everything that I want it to do. The only function I want, but don't know how to do myself is:

I would like the style to remain black [which is class2] IF the user enters something into the box.

I'm sure it's a simple IF statement, but I have never implemented one using Javascript. I will surely understand it once I see it, but I need help this one time...

Thank you in advance...here is the code:
-----------------------------------------------------
<style type="text/css">
.first {
color: #808080;
}

.second{
color: black;
}
</style>

<script language="JavaScript">
function change(id, newClass) {
identity=document.getElementById(id);
identity.className=newClass;
}

</script>

<h4>User Info:</h4>
<input type=text id="changeme2" size="50" maxlength="40" value="Name" class="first" onFocus="change('changeme2', 'second'); this.value= (this.value=='Name')? '' : this.value" onBlur="change('changeme2', 'first'); this.value= (this.value=='')? 'Name' : this.value" value="Name"></td><br \>
<input type=text id="changeme3" size="50" maxlength="40" value="Address" class="first" onFocus="change('changeme3', 'second'); this.value= (this.value=='Address')? '' : this.value" onBlur="change('changeme3', 'first'); this.value= (this.value=='')? 'Address' : this.value" value="Address"></td><br \>
<input type=text id="changeme4" size="50" maxlength="40" value="Phone" class="first" onFocus="change('changeme4', 'second'); this.value= (this.value=='Phone')? '' : this.value" onBlur="change('changeme4', 'first'); this.value= (this.value=='')? 'Phone' : this.value" value="Phone"></td>
-----------------------------------------------------

orion_rus

10:27 pm on Feb 15, 2005 (gmt 0)

10+ Year Member



if i understand u right u can remove change('changeme2', 'first'); from input and u gain all what u want) or add this statement onchange="change('changeme2', 'second');"
I don't clear understand all waht u want by i hope this should work)

Argblat

2:29 pm on Feb 16, 2005 (gmt 0)

10+ Year Member



Sorry for being cryptic with what I am trying to accomplish. Let me see if I can explain it better.

The words inside the text boxes are "Name", "Address", and "Phone", and they are very light gray. They are meant to show the person entering the data what the data they are supposed to be entering is.

When a person clicks into the text box, these clue words dissappear, and the person can type. However, if they person does type his name into the "Name" field, it remains gray, where it should now be black.

However, given your solution using onChange, if the person clicks the "Name" box and does not enter anything [or types "Name" again], it turns black despite the fact that nothing has really changed.

What I'm looking to implement [and I'm sorry for not knowing enough javascript to do it myself] is an if statement that checks what the box says. If it still says "Name", remain gray....if it says anything else [ie a change has occured], then change the text input to black.

it that more clear?
-Mike