New to javascript need serious event handler help.

[jawaune]

Okay guys, please help me deal with my ignorance. I'm trying to do something that so ridiculously common on the internet but I've spent all my time learning PHP and dont know hardly any javascript. I'm trying to create the affect of having text automatically appear in a form field and then have the text disappear as soon as a user focuses on it.

I'm going to be using this technique on lots of different form fields and the text that would appear would say different things so I decided to create functions that accept a parameter.

I did one function for "onfocus" which would make the text disappear and another on for "onblur" and then in the HTML I have the value equal to the text that would disapper then reappear and the parameter being passed to each function is idental to the value of the form field. Here's the code I have in my extermal js file.

function fieldnoshow(words) {
	if(this.value == '" + words + "'){this.value = '';}
	
}
   	
function fieldshow(words) {
	if(this.value == '') {this.value = '" + words + "';
	
}

I also tried returning the values but that didn't work either. Can someone help me out?...Please?

[Logic Ali]

Input fields have a defaultValue property. I'm sure you can work out the rest.

[iBeZi]

Modern browsers support a placeholder attribute on input fields which does this for you.

<input type="text" placeholder="Enter your name" name="name" id="name"/>

You could also add some JavaScript to support browsers that don't support the placeholder attribute

var input = document.createElement('input');
if(!("placeholder" in input)) {
var inputs = document.getElementsByTagName('input');
for(var i = 0, l = inputs.length; i < l; i++) {
if(inputs[i].getAttribute('placeholder')) {
inputs[i].value = inputs[i].getAttribute('placeholder');
inputs[i].addEventListener ? inputs[i].addEventListener('blur',blur) : inputs[i].attachEvent('onblur',blur);
inputs[i].addEventListener ? inputs[i].addEventListener('focus',focus) : inputs[i].attachEvent('onfocus',focus);
}
}

function blur(e) {
var target = e.srcElement ? e.srcElement : e.target;
if(target.value == "") {
target.value = target.getAttribute('placeholder');
}
}
function focus(e) {
var target = e.srcElement ? e.srcElement : e.target;
if(target.value == target.getAttribute('placeholder')) {
target.value = "";
}
}
}

[jawaune]

Thank you so much! I can't believe I didn't know that! I have been designing websites for years and I didn't know something so basic. I had no idea there was a placeholder attribute and it even works in internet explorer 8. It actually makes the text a light gray and it disappears as soon as I start typing. Thank you so much for the javascript code. It definitely looks complicated and goes to show that javascript is alot more difficult than PHP. Even though this placeholder is doing the job I'm still going to try to implement the javascript code as well for folks with old dinasour computers.