Jquery簡單的placeholder效果

標籤：c   style   class   blog   code   java   

Jquery簡單的placeholder效果

  由於IE6-IE9不支援HTML5中的placeholder，所以自己依賴於Jquery簡單的寫了一個，供參考！

  先看看效果吧！如下JSFiddle地址

 查看效果連結

JS代碼如下：

/* * JS placeholder * IE6-IE9不支援HTML5中的placeholder */    function Placeholder(options) {    this.config = {        defaultColor: ‘#ccc‘,        curColor: ‘#333‘,        targetElem: ‘.placeholderCls‘    };    this.init(options);}Placeholder.prototype = {    constructor:Placeholder,    init: function(options){        this.config = $.extend(this.config, options || {});        var self = this,            _config = self.config;                $(_config.targetElem).each(function(){            var supportPlaceholder = ‘placeholder‘ in document.createElement(‘input‘);            if(!supportPlaceholder) {                var defaultValue = $(this).attr(‘placeholder‘);                $(this).focus(function(){                    var pattern = new RegExp("^" + defaultValue + "$|^$");                    pattern.test($(this).val()) && $(this).val(‘‘).css(‘color‘,_config.curColor);                }).blur(function(){                    if($(this).val() == defaultValue) {                        $(this).css(‘color‘,_config.defaultColor);                    }else if($(this).val().length == 0){                        $(this).val(defaultValue).css(‘color‘, _config.defaultColor);                    }                }).trigger(‘blur‘);            }        });            }    };    

HTML代碼如下：

<form id="form1">    <h3>通過value方式類比placeholder</h3>            <p>        <label for="username1">使用者名稱:</label>        <input type="text" class="placeholderCls" placeholder="請輸入使用者名稱">    </p>    <p>        <label for="address1">地　址:</label>        <input type="text" class="placeholderCls" placeholder="請輸入地址">    </p>    <p>        <label for="remarks1">備　注:</label>        <textarea placeholder="請輸入備忘" class="placeholderCls"></textarea>    </p></form>

代碼初始化：

<script>    new Placeholder({});</script>