How to show/hide input value on focus?

Question

I see this all over the web, but was wondering if anyone has the JavaScript code for the EASIEST way to show input value on blur, but hide in on focus.

Thanks!

Answer 1

HTML

<input type="text" id="txtTest" />

Javascript (unobtrusive)

window.onload = function() {
  applyDefaultValue(document.getElementById('txtName'), 'Enter your name');
  applyDefaultValue(document.getElementById('txtAddress'), 'Enter your address');
}

function applyDefaultValue(elem, val) {
  elem.style.color = '#777';
  elem.value = val;
  elem.onfocus = function() {
    if(this.value == val) {
      this.style.color = '';
      this.value = '';
    }
  }
  elem.onblur = function() {
    if(this.value == '') {
      this.style.color = '#777';
      this.value = val;
    }
  }
}

Live Demo

Answer 2

This is what I use on my blog. Just go there and check out the source code behind.

function displaySearchText(text){
    var searchField = document.getElementById('searchField');
    if(searchField != null)
        searchField.value = text;
}

Your input field should look something like this:

<input id='searchField' name='q' onblur='displaySearchText("Search...");' onfocus='displaySearchText("");' onkeydown='performSearch(e);' type='text' value='Search...'/>

Answer 3

The simplest approach I know of is the following:

<input 
    name="tb" 
    type="text" 
    value="some text"
    onblur="if (this.value=='') this.value = 'some text'" 
    onfocus="if (this.value=='some text') this.value = ''"  />

Answer 4

If you don’t care about valid HTML, you use the placeholder attribute. It will work out of the box on a Safari, and you can add some unobtrusive JS to mimic this behavior in other browsers.

More reading:

• http://www.beyondstandards.com/archives/input-placeholders/ (JS implementation)
• http://lab.dotjay.co.uk/experiments/forms/input-placeholder-text/

And google. ;-)

The solution is similar to the one Josh Stodola posted, but it’s more flexible and universal.

Answer 5

This answer was adopted from Josh Stodola, but was slightly modified to do the following:

• Show/Hide Value in Username
• Show/Hide Value in Password (You will see how and why...)
• Swap input type from 'text' to 'password'

My code looks like this:

window.onload = function() {
  applyDefaultValue(document.getElementById('txtUser'), 'Username');
  applyPasswordType(document.getElementById('txtPass'), 'Password', 'text');
}

function applyDefaultValue(elem, val) {
  elem.style.color = '#777';
  elem.value = val;
  elem.onfocus = function() {
    if(this.value == val) {
      this.style.color = '';
      this.value = ''; //On focus, make blank
    }
  }
  elem.onblur = function() {
    if(this.value == '') {
      this.value = val; //If it's not in focus, use declared value
    }
  }
}

function applyPasswordType(elem, val, typ) {
  elem.style.color = '#777';
  elem.value = val;
  elem.type = typ;
  elem.onfocus = function() {
    if(this.value == val) {
      this.style.color = '';
      this.type = 'password'; //If in focus, input type will be 'password'
      this.value = '';
    }
  }
  elem.onblur = function() {
    if(this.value == '') {
      this.value = val;
      this.type = 'text'; //On blur, input type will be 'text' in order to show value
    }
  }
}

Not sure if this is the safest or the correct way to do it, but it sure looks nice! Check it out here.

If you know of a better and/or safer way, please let me know!

Thanks, in advance, and of course thanks to Josh Stodola for the code. :)