Плагин Javascript для управления заполнителем

Question

Посмотрите на страницу регистрации в Твиттере на https://twitter.com/signup

Даже если вы нажмете на первое поле ввода, заполнитель будет заполнен, пока я не начну что-то печатать.Это потрясающе.

Кто-нибудь знает о хорошем плагине jQuery, который подходит к этому?

Answer 1

Нулевой JavaScript необходим в браузерах, поддерживающих атрибут-заполнитель HTML5

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

Answer 2

Я написал этот пример , который функционирует так же, как твиттер, но вы можете захотеть получить дополнительный CSS-код из CSS начальной загрузки Twitter, если вам нужен точный стиль.больше о методе в этом похожем stackoverflow вопросе .

Answer 3

Есть много плагинов для этого. Это мое собственное решение, которое я использую:

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