DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> placeholder屬性做兼容性處理
placeholder屬性做兼容性處理
編輯:HTML5教程     
placeholder是html5新增的一個屬性,當input或者textarea設置了該屬性後,該值的內容將作為灰字提示顯示在文本框中,當文本框獲得焦點(或輸入內容)時,提示文字消失。


但是在不支持html5的低版本的浏覽器中,placeholder屬性是無效的,例如ie9及以下的ie浏覽器不兼容這個屬性。下面介紹placeholder兼容性的處理

效果:http://hovertree.com/texiao/jquery/43/

效果二:http://hovertree.com/texiao/jquery/43/1/


在頁面添加如下腳本
$(function() {
// 如果不支持placeholder,用jQuery來完成
if(!isSupportPlaceholder()) {
// 遍歷所有input對象, 除了密碼框
$('input').not("input[type='password']").each(
function() {
var self = $(this);
var val = self.attr("placeholder");
input(self, val);
}
);

/**//* 對password框的特殊處理
* 1.創建一個text框
* 2.獲取焦點和失去焦點的時候切換
*/
$('input[type="password"]').each(
function() {
var pwdField = $(this);
var pwdVal = pwdField.attr('placeholder');
var pwdId = pwdField.attr('id');
// 重命名該input的id為原id後跟1
pwdField.after('<input id="' + pwdId +'1" type="text" value='+pwdVal+' autocomplete="off" />');
var pwdPlaceholder = $('#' + pwdId + '1');
pwdPlaceholder.show();
pwdField.hide();

pwdPlaceholder.focus(function(){
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
});

pwdField.blur(function(){
if(pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
});
}
);
}
});

// 判斷浏覽器是否支持placeholder屬性
function isSupportPlaceholder() {
var input = document.createElement('input');
return 'placeholder' in input;
}

// jQuery替換placeholder的處理
function input(obj, val) {
var $input = obj;
var val = val;
$input.attr({value:val});
$input.focus(function() {
if ($input.val() == val) {
$(this).attr({value:""});
}
}).blur(function() {
if ($input.val() == "") {
$(this).attr({value:val});
}
});
}
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved