ie placeholder特性的适配性难题处理方式

日期:2020-09-22 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

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显示信息的是.....的特性

这类状况下,处理方式为:

给定两个键入框,

1个是text,1个为password的,

在有聚焦点的情况下,切换为password,丧失聚焦点的情况下,切换为text用来展现placeholder特性.

拷贝编码
编码以下:

<script type="text/javascript" src="jquery⑴.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;"/>