Placeholders

Uses JavaScript to make the HTML5 placeholder attribute work.

by sammy

HTML

<button id='foo'>Add</button>
<input type='text' placeholder='Placeholder worked!'/>

JavaScript

function initPlaceholder(ele) {
    var $ele = $(ele);
    var placeholder = $ele.attr('placeholder');
    if (ele.value == '') $ele.val(placeholder);
}

initPlaceholder($('input[type=text]').live('focus', function() {
    var $this = $(this);
    var placeholder = $this.attr('placeholder');
    if (this.value == placeholder) $this.val('');
}).live('blur', function() {
    var $this = $(this);
    var placeholder = $this.attr('placeholder');
    if (this.value == '') $this.val(placeholder);
}).get(0));

$('button').click(function() {
    var $ele = $("<input type='text' placeholder='Added by foo' />");
    $ele.ready(function(){initPlaceholder($ele.get(0));});
    $('body').append($ele);
});