用于管理占位符的Javascript插件

查看位于的Twitter注册页面

即使当你们点击第一个输入栏时，“全名”占位符也会一直保持在那个里，直到我开始输入一些东西。太棒了

---

有谁知道一个好的jQuery插件可以做到这一点吗？

有很多插件可以实现这一点。这是我自己开发的解决方案，我使用：

/**
 *  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);

---

支持

说明：

我写的功能与twitter一样，但是如果您想要确切的样式，您可能需要从twitter引导CSS中获取一些额外的CSS

---

我在这篇类似的文章中详细介绍了这种方法。

它被称为水印。Twitter使用一个覆盖div来实现这一点，只要你在文本框中键入内容，它就会被隐藏。但它不是标准的水印。即使你点击了输入框，占位符也会保持不变。请注意，一个“合适的”插件可能会提供一些选项，比如提示类，以及如何确定水印值——这只是我最近拼凑的东西，并没有计划一定要共享（但它是有效的）。当您单击标准占位符时，占位符将消失。twitter注册并非如此。

<label>Description: <input type="text" name="desc" placeholder="My Email Account"></label>