如何解决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属性.

代码如下:

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var pwd = $("#pwd");
var password = $("#password");
pwd.focus(function(){
pwd.hide();
password.show().focus();
});
password.focusout(function(){
if(password.val().trim() === ""){
password.hide();
pwd.show();
}
});
});
</script>
<input type="text" id="pwd" value="请输入密码"/>
<input type="password" id="password" />

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

网页题目：如何解决ieplaceholder属性的兼容性-创新互联
网站地址：https://www.cdcxhl.com/article20/djjcco.html

成都网站建设公司_创新互联，为您提供域名注册、ChatGPT、小程序开发、商城网站、外贸建站、动态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联