给不支持placeholder的浏览器加上该属性

同标题:给不支持placeholder的浏览器加上该属性

以前都是用click,blur 然后改val 一直知道和别人的不一样,但就是不知道怎么做,今天终于找到源码了..所以记录下来,以防止忘记了..

/*!
 * jQuery Placeholder snippet
 *
 * This snippet is written for the purpose of supporting the 
 * HTML5 placeholder attribute on most non-HTML5-compliant browsers.
 * 
 * Usage: Just include it in the code: <script src="jquery.place.holder-1.0.js"></script>
 * and include the HTML5 placeholder attribute in your input or textarea tags.
 * Note: This script should go after client code, if client code sets field's color.
 * 
 * Date: May 2011
 * Author: Otacon (byf1987_at_gmail.com)
 * Version: 1.0
 * jQuery Version: 1.5
 * Changelog: Initial release
 * Tested on: Chrome 10.0; IE6 (IETester); IE8 (IETester)
 * Known Issues: 
 *  Placeholder for Password is currently not supported
 */
      
$(function(){
    // -- Constants --
    var PLACE_HOLDER_COLOR = "rgb(169,169,169)"; // "darkGrey" does not work in IE6
    var PLACE_HOLDER_DATA_NAME = "original-font-color";
          
    // -- Util Methods --   
    var getContent = function(element){
        return $(element).val();        
    }
      
    var setContent = function(element, content){
        $(element).val(content);        
    }
          
    var getPlaceholder = function(element){
        return $(element).attr("placeholder");
    }
          
    var isContentEmpty = function(element){
        var content = getContent(element);
        return (content.length === 0) || content == getPlaceholder(element);
    }
              
    var setPlaceholderStyle = function(element){
        $(element).data(PLACE_HOLDER_DATA_NAME, $(element).css("color"));
        $(element).css("color", PLACE_HOLDER_COLOR);        
    }
          
    var clearPlaceholderStyle = function(element){
        $(element).css("color", $(element).data(PLACE_HOLDER_DATA_NAME));       
        $(element).removeData(PLACE_HOLDER_DATA_NAME);
    }
          
    var showPlaceholder = function(element){
        setContent(element, getPlaceholder(element));
        setPlaceholderStyle(element);   
    }
          
    var hidePlaceholder = function(element){
        if($(element).data(PLACE_HOLDER_DATA_NAME)){
            setContent(element, "");
            clearPlaceholderStyle(element);
        }
    }
          
    // -- Event Handlers --
    var inputFocused = function(){
        if(isContentEmpty(this)){
            hidePlaceholder(this);      
        }
    }
          
    var inputBlurred = function(){
        if(isContentEmpty(this)){
            showPlaceholder(this);
        }
    }
          
    var parentFormSubmitted = function(){
        if(isContentEmpty(this)){
            hidePlaceholder(this);      
        }   
    }
          
    // -- Bind event to components --
    $("textarea, input[type='text']").each(function(index, element){
        if($(element).attr("placeholder")){
            $(element).focus(inputFocused);
            $(element).blur(inputBlurred);
            $(element).bind("parentformsubmitted", parentFormSubmitted);
                  
            // triggers show place holder on page load
            $(element).trigger("blur");
            // triggers form submitted event on parent form submit
            $(element).parents("form").submit(function(){
                $(element).trigger("parentformsubmitted");
            });
        }
    });
});

用法很简单,就在你的input上加个placeholder属性,写上你要显示的文字,把上面的JS引到页面.