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});
}
});
}