Default text on input

Question

How to set blank default text on input field and clear it when element is active.

Answer 1

In recent Webkit builds, you may set the placeholder attribute on a field to set its default text.

<input type="text" placeholder="Type some text" id="myField" />

However, in other browsers, you'll have to use JavaScript to capture the focus and blur events:

var addEvent = function(elem, type, fn) { // Simple utility for cross-browser event handling
    if (elem.addEventListener) elem.addEventListener(type, fn, false);
    else if (elem.attachEvent) elem.attachEvent('on' + type, fn);
},
textField = document.getElementById('myField'),
placeholder = 'Type some text'; // The placeholder text

addEvent(textField, 'focus', function() {
    if (this.value === placeholder) this.value = '';
});
addEvent(textField, 'blur', function() {
    if (this.value === '') this.value = placeholder;
});

Demo: http://jsbin.com/utecu

Answer 2

The following would work:

<input name="example" type="text" id="example" size="50" value="EGTEXT" onfocus="if(this.value=='EGTEXT')this.value=''" onblur="if(this.value=='')this.value='EGTEXT'" />

Hope this helps,

Kyle.

Answer 3

Declare styles for inactive and active states:

.active {
    color: black;
}

.inactive {
    color: #909090;
}

Add the Javascript to handle the changing of state:

function toggleText(el)
{
    var v = el.value;

   //Remove text to allow editing
    if(v=="Default text") {
     el.value = "";
     el.className = "active";
    }
    else {
         //Remove whitespace
     if(v.indexOf(" ")!=-1) {
      split = v.split(" ").join("");
      v = split;
     }

          //Change to inactive state
     if(v=="") {
      el.value = "Default text";
      el.className = "inactive";
     }
    }
}

Add your input box, with the default value set, the inactive class set and Javascript handlers pointing to the toggleText() function (you could use event listeners to do this if you wish)

<input type="text" value="Default text" class="inactive" onFocus="toggleText(this);" onBlur="toggleText(this);">

Answer 4

From a usability point of view the text in the input component should be preserved only for user's input purposes. The possible default value in the input should be valid if left untouched by the user.

If the placeholder text is meant to be a hint for how to fill the input, it is better to be blaced near the input where it can be seen also when the input has been filled. Moreover, using a placeholder text inside text components can cause troubles e.g. with braille devices.

If a placeholder text is used, regardless of usability guidelines, one should make sure that it is done in an unobtrusive way so that it works with user agents without javascript or when js is turned off.

Answer 5

I have found jQuery plugin (http://www.jason-palmer.com/2008/08/jquery-plugin-form-field-default-value/) and use it :)