jQuery 占位符插件 - 我做错了什么？

Question

我有很多像这样的占位符:

<input placeholder="Placeholder">

但是，在 IE 中这会失败，我只有空白框。我找到了一个假定的修复here 。

我完全按照指示将其包括在内:

<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>

它仍然无法生成占位符。我做错了什么？

Answer 1

这是我在元素中使用的内容(缩小后仅 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();

这是 fiddle :http://jsfiddle.net/vNkPD