Show placeholder instead of the default value in html form

forms, html, javascript, twitter-bootstrap

Solution

From what you said here it sounds like you actually want to listen for the focus and blur events and just clear the contents of the `<input>` with some kind of cache to restore it if nothing gets typed.

<input id="foo" type="text" value="" data-value="" />

Then in script

var foo = document.getElementById('foo');
foo.addEventListener('focus', function () {
    this.setAttribute('data-value', this.value);
    this.value = '';
});
foo.addEventListener('blur', function () {
    if (this.value === '')
        this.value = this.getAttribute('data-value');
});

DEMO

Problem

Original source