如何解決ieplaceholder屬性的兼容性-創(chuàng)新互聯(lián)

這篇文章主要介紹“如何解決ie placeholder屬性的兼容性”，在日常操作中，相信很多人在如何解決ie placeholder屬性的兼容性問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何解決ie placeholder屬性的兼容性”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

超過十余年行業(yè)經驗，技術領先，服務至上的經營模式，全靠網絡和口碑獲得客戶，為自己降低成本，也就是為客戶降低成本。到目前業(yè)務范圍包括了：做網站、成都網站制作，成都網站推廣，成都網站優(yōu)化，整體網絡托管，成都微信小程序，微信開發(fā)，app軟件開發(fā)公司，同時也可以讓客戶的網站和網絡營銷和我們一樣獲得訂單和生意！

html 5 有個很棒的屬性，placeholder，在鼠標聚焦到上面時候，提示文字會消失，失去焦點之后，又會出現(xiàn)：

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

代碼如下:

//placeholder功能實現(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');
}
}
};

使用時候：

代碼如下:

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屬性的兼容性”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

網頁題目：如何解決ieplaceholder屬性的兼容性-創(chuàng)新互聯(lián)
網站地址：http://muchs.cn/article20/djjcco.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供域名注冊、ChatGPT、小程序開發(fā)、商城網站、外貿建站、動態(tài)網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)