2012-01-16 3 views
1

나는과 같이 자리를 많이 가지고있다. 나는 픽스를 발견했다 here.jQuery 자리 표시 자 플러그인 - 내가 뭘 잘못하고 있니?</p> <pre><code><input placeholder="Placeholder"> </code></pre> <p>그러나, 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> 

그것은 여전히 ​​자리를 생산하기 위해 실패 표시된대로

나는 정확히 포함되어 있습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

답변

3

여기에 (그냥 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

+0

나머지 스크립트와 함께 머리글에 포함하면됩니까? 방금 코드를 사용하고'