如何解决ieplaceholder属性的兼容性

这篇文章主要介绍“如何解决ie placeholder属性的兼容性”，在日常操作中，相信很多人在如何解决ie placeholder属性的兼容性问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何解决ie placeholder属性的兼容性”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

专注于为中小企业提供成都做网站、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业普安免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

html 5 有个很棒的属性，placeholder，在鼠标聚焦到上面时候，提示文字会消失，失去焦点之后，又会出现：

但是在不支持html5的低版本的浏览器中，placeholder属性是无效的，为了解决这个问题，因此，人为的去实现placeholder属性：

代码如下:

//placeholder功能实现
var placeholder = {
add: function (el) {
if (!('placeholder' in document.createElement('input'))) {
var self = placeholder;
el.each(function (e) {
if (IsEmpty(e.value()) || e.value() == e.attr('placeholder')) {
e.value(e.attr('placeholder'));
e.css('color', 'gray');
}
else {
e.css('color', 'black');
}
});
el.bind('focus', self._onfocus);
el.bind('click', self._onfocus);
el.bind('blur', self._onblur);
el.bind('keyup', self._onkeyup);
}
},
remove: function (el) {
if (!('placeholder' in document.createElement('input'))) {
var self = placeholder;
el.unbind('focus', self._onfocus);
el.unbind('click', self._onfocus);
el.unbind('blur', self._onblur);
}
},
check: function (el) {
if (!('placeholder' in document.createElement('input'))) {
el.each(function (tar) {
if (IsEmpty(tar.value())) {
tar.value(tar.attr('placeholder'));
}
});
}
},
clear: function () {
if (!('placeholder' in document.createElement('input'))) {
$('input[type="text"]').each(function (el) {
if (el.value() == el.attr('placeholder')) {
el.value('');
}
});
$('textarea').each(function (el) {
if (el.value() == el.attr('placeholder')) {
el.value('');
}
});
}
},
_onfocus: function () {
if ($(this).value() == $(this).attr('placeholder'))
$(this).value('');
},
_onblur: function () {
if (IsEmpty($(this).value()) || $(this).value() == $(this).attr('placeholder')) {
$(this).value($(this).attr('placeholder'));
$(this).css('color', 'gray');
}
else {
$(this).css('color', 'black');
}
},
_onkeyup: function () {
if (IsEmpty($(this).value())) {
$(this).css('color', 'gray');
}
else {
$(this).css('color', 'black');
}
}
};

使用时候：

代码如下:

placeholder.add($('input[type="text"]'));
placeholder.add($('textarea'));

需要注意的是，考虑到如果input的type是password的时候，placeholder显示的是.....的属性

这种情况下，解决方法为：

给定两个输入框，

一个是text，一个为password的，

在有焦点的时候，切换为password，失去焦点的时候，切换为text用来展示placeholder属性.

代码如下:

到此，关于“如何解决ie placeholder属性的兼容性”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！