jQuery Placeholder Plugin - что я делаю не так? - PullRequest
Новая
       21

jQuery Placeholder Plugin - что я делаю не так?

1 голос
/ 16 января 2012

У меня много заполнителей, таких как: 

<input placeholder="Placeholder">

Однако в IE это не получается, и у меня просто пустые поля. Я нашел предполагаемое исправление здесь .

Я включил его точно так, как указано: 

<script>
$("'[placeholder]'").focus(function() {
var input = $(this);
if (input.val() == input.attr("'placeholder'")) {
input.val("''");
input.removeClass("'placeholder'");
}
}).blur(function() {
var input = $(this);
if (input.val() == "''" || input.val() == input.attr("'placeholder'")) {
input.addClass("'placeholder'");
input.val(input.attr("'placeholder'"));
}
}).blur();

$("'[placeholder]'").parents("'form'").submit(function() {
$(this).find("'[placeholder]'").each(function() {
var input = $(this);
if (input.val() == input.attr("'placeholder'")) {
  input.val("''");
}
})
});
</script>

Это все еще не в состоянии произвести заполнители. Что я делаю не так?

1 Ответ

3 голосов
/ 16 января 2012

Вот что я использую в своих проектах (всего 753 байта): 

(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);

Вот сокращенная версия: 

(function(b){var d=!!("placeholder"in document.createElement("input"));b.fn.placeholder=function(c){return d?this:this.each(function(){var a=b(this);c=c||a.attr("placeholder");"INPUT"!==this.tagName?b.error('jquery.placeholder only works on "input" elements. Does not support "'+this.tagName.toLowerCase()+'" elements.'):a.data("jquery-placeholder")||(a.data("jquery-placeholder",!0),""===a.val()&&a.val(c).addClass("placeholder"),a.focus(function(){var a=b(this);a.val()===c&&a.hasClass("placeholder")&&a.val("").removeClass("placeholder")}).blur(function(){var a=b(this);""===a.val()&&a.val(c).addClass("placeholder")}))})};d||b(document).delegate("form","submit",function(){b(this).find(".placeholder").val("").removeClass("placeholder")})})(jQuery);

Затем, чтобы использовать его, просто запустите его на готовом документе: 

$('input[placeholder]').placeholder();

Вот скрипка: http://jsfiddle.net/vNkPD

...