ie placeholder属性的兼容性问题

最新推荐文章于 2020-09-11 14:56:41 发布

原创最新推荐文章于 2020-09-11 14:56:41 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #html5 #ie #JS #placeholder

JavaScript/html/CSS 专栏收录该内容

82 篇文章

订阅专栏

本文介绍了一种在不支持HTML5的浏览器中实现placeholder属性的方法。通过JavaScript代码，可以为文本框和文本区域添加占位符文本，并在获得焦点时清除这些文本，失去焦点时重新显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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" style="display:none;"/>