如何解决ieplaceholder属性的兼容性-创新互联
这篇文章主要介绍“如何解决ie placeholder属性的兼容性”,在日常操作中,相信很多人在如何解决ie placeholder属性的兼容性问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何解决ie placeholder属性的兼容性”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
超过十余年行业经验,技术领先,服务至上的经营模式,全靠网络和口碑获得客户,为自己降低成本,也就是为客户降低成本。到目前业务范围包括了:做网站、成都网站制作,成都网站推广,成都网站优化,整体网络托管,成都微信小程序,微信开发,app软件开发公司,同时也可以让客户的网站和网络营销和我们一样获得订单和生意!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属性的兼容性”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
网站名称:如何解决ieplaceholder属性的兼容性-创新互联
文章出自:http://cdiso.cn/article/djjcco.html