欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ie placeholder屬性的兼容性問題解決方法

  發(fā)布時(shí)間：2014-06-30 17:56:19   作者：佚名   我要評(píng)論
html 5有個(gè)很棒的屬性，placeholder，但是在不支持html5的低版本的瀏覽器中，因此要人為的去實(shí)現(xiàn)placeholder屬性，下面有個(gè)示例，感興趣的朋友可以參考下
html 5 有個(gè)很棒的屬性，placeholder，在鼠標(biāo)聚焦到上面時(shí)候，提示文字會(huì)消失，失去焦點(diǎn)之后，又會(huì)出現(xiàn)：

但是在不支持html5的低版本的瀏覽器中，placeholder屬性是無效的，為了解決這個(gè)問題，因此，人為的去實(shí)現(xiàn)placeholder屬性：

復(fù)制代碼
代碼如下:

//placeholder功能實(shí)現(xiàn)
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');
}
}
};

使用時(shí)候：

復(fù)制代碼
代碼如下:

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

需要注意的是，考慮到如果input的type是password的時(shí)候，placeholder顯示的是.....的屬性

這種情況下，解決方法為：

給定兩個(gè)輸入框，

一個(gè)是text，一個(gè)為password的，

在有焦點(diǎn)的時(shí)候，切換為password，失去焦點(diǎn)的時(shí)候，切換為text用來展示placeholder屬性.

復(fù)制代碼
代碼如下:

<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="請(qǐng)輸入密碼"/>
<input type="password" id="password" style="display:none;"/>

相關(guān)文章

最新評(píng)論