Deleting initial value text from a form text field on click.

[Iconic_creator]

Hello everyone,
I have a simple text field in a form tag.
I have initial value text.

Basically the initial Value tells the user what the field is for.

Eg: Password.

Now when the user click in the field, the initial val text is deleted by an on click event.

<input name="userName" type="text" id="uNameField" onclick="this.value='';" value="Enter username" maxlength="19" />

The problem is, lets assumed the user typed a user name in the field but forgot to add a character and decides to add that character, the value they entered previously gets deleted. This can be frustrating. But I am only using it for two fields not an entire form.

Is there a way to make the initial value delete on the first click in the text field but then whatever the user typed remains until the form is either submitted or the browser is refreshed or clear?


I'm lost here.

Any ideas will be appreciated.


IC

[Stomme poes]

You might want to do this the other way around.

Have no default value, and if the user has Javascript enabled, then have the script add in the value "Set your username" just once. onblur, when the focus is set on the input, and the value's gone, and let this only happen once per page load.

That way those of us who don't have JS don't need to keep deleting your value before typing in what we want, and those with JS only need to set focus there with a click and the input remains empty for the rest of the time the page is there.

[dmcleary]

Hi Iconic_creator,

Is it something like this you want to do?

<input type="text" name="myInput" value="Enter password" onfocus="if(this.value == 'Enter password'){this.value = '';}" />

I hope that helps

Regards,


David

[ralph.m]

@Stomme poes I don't know if this still applies, but at some time some user agents had problems with empty form controls.

http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-specific

I guess it's not too hard to double click the default text and delete if you don't have JavaScript enabled.

With that in mind, here is a nice script courtesy of Jeremy Keith (from DOM Scripting) that allows for the behavior requested by the OP and more (this can be placed in the head section, or in a separate .js file):

function resetFields(whichform) { 
  for (var i=0; i<whichform.elements.length; i++) { 
    var element = whichform.elements[i]; 
    if (element.type == "submit") continue; 
    if (!element.defaultValue) continue; 
    element.onfocus = function() { 
      if (this.value == this.defaultValue) { 
      this.value = ""; 
      } 
    } 
    element.onblur = function() { 
      if (this.value == "") { 
      this.value = this.defaultValue; 
      } 
    } 
  } 
} 

window.onload = prepareForms;
function prepareForms() { 
  for (var i=0; i<document.forms.length; i++) { 
    var thisform = document.forms[i]; 
    resetFields(thisform); 
  }  
}

This solution is nice in that no JS needs to be placed in the form HTML at all (or on the entire page, for that matter, if you link to an external .js file).

All you need in the HTML is to make sure that a value is set:

<input name="userName" type="text" id="uNameField" value="Enter username" maxlength="19" />

[Iconic_creator]

Originally Posted by ralph.m

@Stomme poes I don't know if this still applies, but at some time some user agents had problems with empty form controls.

http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-specific

I guess it's not too hard to double click the default text and delete if you don't have JavaScript enabled.

With that in mind, here is a nice script courtesy of Jeremy Keith (from DOM Scripting) that allows for the behavior requested by the OP and more (this can be placed in the head section, or in a separate .js file):

function resetFields(whichform) { 
  for (var i=0; i<whichform.elements.length; i++) { 
    var element = whichform.elements[i]; 
    if (element.type == "submit") continue; 
    if (!element.defaultValue) continue; 
    element.onfocus = function() { 
      if (this.value == this.defaultValue) { 
      this.value = ""; 
      } 
    } 
    element.onblur = function() { 
      if (this.value == "") { 
      this.value = this.defaultValue; 
      } 
    } 
  } 
} 

window.onload = prepareForms;
function prepareForms() { 
  for (var i=0; i<document.forms.length; i++) { 
    var thisform = document.forms[i]; 
    resetFields(thisform); 
  }  
}

This solution is nice in that no JS needs to be placed in the form HTML at all (or on the entire page, for that matter, if you link to an external .js file).

All you need in the HTML is to make sure that a value is set:

<input name="userName" type="text" id="uNameField" value="Enter username" maxlength="19" />

Whats up Ralph,
I really appreciate the time and effort you have taken to help me get this going. I have everything working right now.

I was provided a script by a guy called Murray at the Adobe - Dreamweaver Forum.

But your code appeared to separate the JS from the HTML.

Here's the JS code provided by Murray.

onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue"

Here is the full code attached to the form field.

<label for="userPassword">Password</label>
<input type="text" name="userPassword" id="passwordField" onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue" value="Enter Password" maxlength="19" />

However, I will tried the method you provided also.

Is whichform the name of my form? I am a novice to JS, should this be replace by the ID of my form or the form name?


Thanks again.

IC

[Iconic_creator]

Originally Posted by dmcleary

Hi Iconic_creator,

Is it something like this you want to do?

<input type="text" name="myInput" value="Enter password" onfocus="if(this.value == 'Enter password'){this.value = '';}" />

I hope that helps

Regards,


David

This works perfectly.

onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue"

The code you provided have to be deleted manually not on click and the default text does not re appear when you click outside the fields.

Thanks very much!

IC

[Stomme poes]

Originally Posted by ralph

I don't know if this still applies, but at some time some user agents had problems with empty form controls.

Possibly, but for accessibility and usability reasons I almost never put values in inputs. Instead I have value="" in the code (which should only be required for radios and checkboxes (with real non-zero values) but I started adding them in everything for my colleague's back-end scripts).

I wouldn't want someone who accidentally skipped something to be submitting some value that isn't true, and not everyone has ease in deleting text before writing in text.

[ralph.m]

@Stomme poes Strangely, the use of the default values is said to be for the sake of accessibility. As least once upon a time, I've read that browsers had trouble recognizing empty form fields, making keyboard navigation difficult, as you could not tab to empty fields.

Originally Posted by Iconic_creator

your code appeared to separate the JS from the HTML.

Indeed, that's its virtue.

Is whichform the name of my form? ...should this be replace by the ID of my form or the form name?

No; no change to your form needs to be made at all. The script just runs through any form on the page.

[Stomme poes]

As least once upon a time, I've read that browsers had trouble recognizing empty form fields, making keyboard navigation difficult, as you could not tab to empty fields.

That's certainly possible, I haven't tabbed through forms in many older browsers. Nothing older than IE5.5 or Opera 9x at least.