可以试试这个插件,试过没问题
(function($)
{
// check for native placeholder support. Borrowed from Modernizr.
var placeholderSupport = !!( 'placeholder' in document.createElement('input') );
$.fn.placeholder = function(text)
{
// if placeholder is supported natively, exit
if (placeholderSupport) return this;
// else:
return this.each(function()
{
var $this = $(this);
text = text || $this.attr('placeholder');
// if it's not a input element, exit
if ( this.tagName !== "INPUT" )
{
$.error('jquery.placeholder only works on "input" elements. Does not support "' + this.tagName.toLowerCase() + '" elements.');
return;
}
// If placeholder has already been applied, exit
if ( $this.data('jquery-placeholder') ) return;
// If not, let's mark it now as having placeholder applied
$this.data('jquery-placeholder', true);
// if its value is empty, let's add the placeholder text
if ( $this.val() === '' )
{
$this.val( text ).addClass('placeholder');
}
// Now, let's setup the focus & blur events, to add and remove the text & the class, respectively.
$this.focus(function()
{
var $this = $(this);
if ( $this.val() === text && $this.hasClass('placeholder') )
{
$this.val('').removeClass('placeholder');
}
})
.blur(function()
{
var $this = $(this);
if ( $this.val() === '')
{
$this.val( text ).addClass('placeholder');
}
});
});
};
// Now, before we leave, let's just make sure that these placeholder values never get submitted
placeholderSupport || $(document).delegate('form', 'submit', function()
{
$(this)
.find('.placeholder')
.val('').removeClass('placeholder');
});
})(jQuery);
$('input[placeholder]').placeholder();
fiddle地址: http://jsfiddle.net/vNkPD