用于管理占位符的Javascript插件

请访问https://twitter.com/signup上的Twitter注册页面

即使您点击第一个输入字段“全名”占位符一直停留在那里，直到我开始输入内容。 太棒了。

有谁知道一个好的jQuery插件接近那个？

Answer 1

那里有很多插件。 这是我使用的本土解决方案：

/** * Yet another textbox hint plugin... * Usage: $('.selector').hint(); * The title attribute of the input will be used as the watermark value. */ (function($) { $.fn.hint = function() { var hintedClass = 'hinted'; return this.each(function() { var $field = $(this), title = $field.attr('title'), $form = $(this.form); // bail out if there isn't a title attribute if (!title) { return; } // add/remove hint behavior var addHint = function() { $field.val() || $field.addClass(hintedClass).val(title); }, removeHint = function() { if ($field.hasClass(hintedClass) && $field.val() === title) { $field.val('').removeClass(hintedClass); } }; // set our focus/blur handlers $field.focus(removeHint).blur(addHint); // if the field isn't already focused, add the hint now $field.is(':focus') || addHint(); // form submission handling $form.submit(removeHint); }); }; })(jQuery); 

Answer 2

在支持HTML5占位符属性的浏览器中需要零JavaScript

 Description:  

Answer 3

我写的这个例子就像twitter一样，但是如果你想要精确的样式，你可能想从twitter bootstrap CSS中获取一些额外的CSS。

我在这个类似的stackoverflow问题中详细讨论了该方法。