"password" and "username" in text field...click in disappear

[dadamssg]

im trying to do something exactly like snappages.com where the site has a login section and the values Password and Username are the default but when you click in the box it disappears...i know this is an illusion with two divs but i don't know how to do the javascript...does anybody know how to do this? or of a simple tutorial?( i don't really know what to call it)

[xtopolis]

They assign values to their input fields in the HTML.

When the input field is clicked, they set the values to "" (null/blank).

 

This is a primitive one liner:

<input type="text" value="Username" onclick="this.value = ''">

 

You can view their source to see their nifty tricks.

[dadamssg]

i also want to...if the user hasn't inputted anything and they click elsewhere the default gets set back to Username....but if they have, keep whatever they have inputted even if they click away....help?

[xtopolis]

Create a function to handle the <input>s onblur() event.  onblur() is called when the element loses focus (such as clicking/tabing away)

[stewart]

Here would be my quick solution to your problem :

 

<input type="text" name="userField" id="Username" value="Username" onclick="toggleField(this)" onblur="toggleField(this,1)" />

 

For the html, and then for the javascript :

 

 

function toggleField(el,isBlur){

origValue = el.value;

if(el.id == el.value){
	el.value = '';
} else {
	el.value = origValue;
}

if(el.value == '' && isBlur){
	el.value = el.id;
}

}

 

Only trick to it is making the id of the field the same as the default value, in this case Username, or EMail, or whatever else  you may need. Might not the most efficient way to do it depending on how many other fields you have to work with, but this is a quick dirty one that works.

[dadamssg]

hey thanks that works just like i want 

[dadamssg]

how would i make it to where when the page refreshes the inputted values get thrown and the Username and Password defaults get put in there? right now whatever the user inputs will stick in there

[stewart]

how would i make it to where when the page refreshes the inputted values get thrown and the Username and Password defaults get put in there? right now whatever the user inputs will stick in there

 

That's standard behavior for form elements. If you go to the address again (actually hitting enter in the address field or retype it.. ) it will reset the form, but a simple page refresh keeps entered values.

I'm sure there is a possible way to detect a page refresh, but like I said that is default behavior for form text fields.

[Ken2k7]

Just have JavaScript set it. Simple and easy.

[dadamssg]

how?

[Ken2k7]

Hi,

Well, you can start by learning some JavaScript DOM. Google for JavaScript DOM tutorial or click here. It's really just basic JavaScript.

 

Ken