html+placeholder+兼容问题,placeholder属性做兼容性处理

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('');

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

}

});

}