html5里不占位隐藏,HTML5占位符在焦点上消失

Stefano J. Attardi写了一个很棒的jQuery插件，就是这样做的

它比罗伯特更稳定，并且当场地聚焦时也会变淡。“

我修改了他的插件以阅读placeholder属性，而不是手动创建span

This fiddle有完整的代码：

HTML

JS

// Original code by Stefano J. Attardi, MIT license

(function($) {

function toggleLabel() {

var input = $(this);

if (!input.parent().hasClass('placeholder')) {

var label = $('').addClass('placeholder');

input.wrap(label);

var span = $('');

span.text(input.attr('placeholder'))

input.removeAttr('placeholder');

span.insertBefore(input);

}

setTimeout(function() {

var def = input.attr('title');

if (!input.val() || (input.val() == def)) {

input.prev('span').css('visibility', '');

if (def) {

var dummy = $('').text(def).css('visibility','hidden').appendTo('body');

input.prev('span').css('margin-left', dummy.width() + 3 + 'px');

dummy.remove();

}

} else {

input.prev('span').css('visibility', 'hidden');

}

}, 0);

};

function resetField() {

var def = $(this).attr('title');

if (!$(this).val() || ($(this).val() == def)) {

$(this).val(def);

$(this).prev('span').css('visibility', '');

}

};

var fields = $('input, textarea');

fields.live('mouseup', toggleLabel); // needed for IE reset icon [X]

fields.live('keydown', toggleLabel);

fields.live('paste', toggleLabel);

fields.live('focusin', function() {

$(this).prev('span').css('color', '#ccc');

});

fields.live('focusout', function() {

$(this).prev('span').css('color', '#999');

});

$(function() {

$('input[placeholder], textarea[placeholder]').each(

function() { toggleLabel.call(this); }

);

});

})(jQuery);

CSS

.placeholder {

background: white;

float: left;

clear: both;

}

.placeholder span {

position: absolute;

padding: 5px;

margin-left: 3px;

color: #999;

}

.placeholder input, .placeholder textarea {

position: relative;

margin: 0;

border-width: 1px;

padding: 6px;

background: transparent;

font: inherit;

}

/* Hack to remove Safari's extra padding. Remove if you don't care about pixel-perfection. */

@media screen and (-webkit-min-device-pixel-ratio:0) {

.placeholder input, .placeholder textarea { padding: 4px; }

}