html5的placeholder屬性（IE如何兼容placeholder屬性）

界面UI推薦

jquery html5 實現placeholder兼容password  IE6

html5的placeholder屬性（IE如何兼容placeholder屬性） 

2013-01-05 10:26:06|  分類： web學習 |  標籤：html  js  ie  placeholder  |舉報 |字號大中小 訂閱

 

 

placeholder屬性，IE對其的支持表示無奈，firefox、google chrome表示毫無壓力。

 

HTML5對Web Form作了許多加強，好比input新增的type類型、Form Validation等。Placeholder是HTML5新增的另外一個屬性，當input或者textarea設置了該屬性後，該值的內容將做爲灰字提示顯示在文本框中，當文本框得到焦點時，提示文字消失。之前要實現這效果都是用JavaScript來控制才能實現：

<input id="t1" type="text" placeholder="請輸入文字" />

因爲placeholder是個新增屬性，目前只有少數瀏覽器支持，如何檢測瀏覽器是否支持它呢？(更多HTML5/CSS3特性檢測能夠訪問)

 

默認提示文字是灰色的，能夠經過CSS來改變文字樣式：

 

兼容其餘不支持placeholder的瀏覽器：

 

介紹一個超強的讓IE下支持placeholder的屬性插件,代碼以下：

 

 $(document).ready(function () {
            var doc = document,
                inputs = doc.getElementsByTagName('input'),
                supportPlaceholder = 'placeholder' in doc.createElement('input'),
                placeholder = function (input) {
                    var text = input.getAttribute('placeholder'),
                        defaultValue = input.defaultValue;
                    if (defaultValue == '') {
                        input.value = text
                    }
                    input.onfocus = function () {
                        if (input.value === text) {
                            this.value = ''
                        }
                    };
                    input.onblur = function () {
                        if (input.value === '') {
                            this.value = text
                        }
                    }
                };
            if (!supportPlaceholder) {
                for (var i = 0, len = inputs.length; i < len; i++) {
                    var input = inputs[i],
                        text = input.getAttribute('placeholder');
                    if (input.type === 'text' && text) {
                        placeholder(input)
                    }
                }
            }
        });

 

直接把代碼複製下來,保存成一個js文件引用便可，根本不用再作任何處理，超級方便~

 此文源於http://lidrema.blog.163.com/blog/static/209702148201305101844932/