一聚教程网:一个值得你收藏的教程网站

热门教程

html5中placeholder兼容js代码

时间:2022-06-25 18:17:48 编辑:袖梨 来源:一聚教程网


在做项目时,特别对于登录,注册一些重要提示,一般都是使用placeholder属性,可以实现输入时提示信息消失,失去焦点后提示信息显示,只是这个属性也存在不够兼容;

下面的代码可以尝试去用jQuery来完成不支持placeholder的时候。

注意:对于密码框需要单独进行处理,另外,input 框里的文字样式可能需要另加修改。

自己可以在这段代码的基础上进行改善,以达到自己需要的效果。

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

热门栏目