Default text on input

Question

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

Answer 1

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