Default text on input

Question

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

Duplicate: http://stackoverflow.com/questions/1073428/what-the-best-way-to-display-a-default-text-in-textbixes-and-textareas/1073514#1073514 — Quentin, Jul 09 '09 at 10:02
I have found jQuery plugin (http://www.jason-palmer.com/2008/08/jquery-plugin-form-field-default-value/) and use it :) — Jaro, Jul 10 '09 at 11:20
Old question, I know, but I wrote a really lightweight plugin because I didn't like the other ones out there. All you need to do is include it, add `placeholder` as a class on the input, and put the default text in the `title` attribute. https://github.com/justinbangerter/placeholder.js — jbangerter, Dec 13 '13 at 17:17

score 78 · Accepted Answer · edited Jul 15 '14 at 22:01

In modern browsers, 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 older browsers, you may 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

Cool, it's a part of HTML 5, http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#attr-input-placeholder — cic, Jul 09 '09 at 10:03

Kyle Rosendo · Answer 2 · 2011-02-02T05:05:25.367

14

Using the onFocus and onBlur events allows you to achieve this, I.e.:

onfocus="if(this.value=='EGTEXT')this.value=''"

and

onblur="if(this.value=='')this.value='EGTEXT'"

The full example is as follows:

<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'" />

edited Feb 02 '11 at 05:05

answered Jul 09 '09 at 09:59

Kyle Rosendo

25,001
7
80
118

score 5 · Answer 3 · answered Feb 01 '11 at 21:14

Or simply

<input name="example" type="text" id="example" value="Something" onfocus="value=''" />

This will not post back the default text once the box is cleared but also will allow the user to clear the box and see all results in the case of an autocomplete script.

score 3 · Answer 4 · answered Jul 09 '09 at 10:02

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);">

score 3 · Answer 5 · answered Jul 09 '09 at 15:29

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.

score 1 · Answer 6 · answered Jul 10 '09 at 11:20

1

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

answered Jul 10 '09 at 11:20

Jaro

982
1
10
25

score 1 · Answer 7 · answered Oct 23 '14 at 14:03

What I did is put a placeholder attribute for modern browsers:

<input id='search' placeholder='Search' />

Then, I made a fallback for older browsers using JQuery:

var placeholder = $('search').attr('placeholder');
//Set the value
$('search').val(placeholder);

//On focus (when user clicks into the input)
$('search').focus(function() {
   if ($(this).val() == placeholder)
     $(this).val('');
});

//If they focus out of the box (tab or click out)
$('search').blur(function() {
   if ($(this).val() == '')
     $(this).val(placeholder);
});

This works for me.

score 0 · Answer 8 · answered Jun 07 '13 at 15:48

0

You can use placeholder attribute.
np. <input type="text" name="fname" placeholder="First name">
check http://www.w3schools.com/tags/att_input_placeholder.asp

answered Jun 07 '13 at 15:48

user2464189

11

score 0 · Answer 9 · answered Jul 13 '11 at 05:53

You can use this plugin (I'm an co-author)

https://github.com/tanin47/jquery.default_text

It clones an input field and put it there.

It works on IE, Firefox, Chrome and even iPhone Safari, which has the famous focus problem.

This way you do not have to be worried about clearing input field before submitting.

OR

If you want to HTML5 only, you can just use attribute "placeholder" on input field

Default text on input

9 Answers9