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

ここにはフィドルがあります：http://jsfiddle.net/vNkPD

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.