jQuery制作input提示內(nèi)容（兼容IE8以上）
更新時間：2017年07月05日 11:41:23 作者：小張228
這篇文章主要為大家詳細(xì)介紹了jQuery制作input提示內(nèi)容，兼容IE8以上，具有一定的參考價值，感興趣的小伙伴們可以參考一下
我們都知道HTML5的input新屬性有 placeholder=""，那么這個不兼容IE低版本我們只能用腳本來寫了。
首先HTML新建一個input
<input type="text" class="input" value="請輸入搜索內(nèi)容" />
然后我們再引入相應(yīng)的js庫，再使用jQuery
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(".input").bind({
focus:function(){
if (this.value == this.defaultValue){
this.value="";
}
},
blur:function(){
if (this.value == ""){
this.value = this.defaultValue;
}
}
});
</script>
簡單吧，這樣就可以了，那么這個是input的屬性是text，我們要密碼password也一樣可以顯示IE低版本，我們用的方法就是用兩個input，一個text默認(rèn)顯示，一個password默認(rèn)隱藏，當(dāng)text獲取焦點時password顯示，text隱藏，沒有輸入內(nèi)容失去焦點text顯示，password顯示，好了，廢話不多說，看代碼！
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>密碼框提示</title>
</head>
<body>
<input type="text" value="登錄密碼" class="show" >
<input type="password" class="log_paw" style="display: none;">
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$('.show').focus(function(){
var text_value = $(this).val();
if (text_value == this.defaultValue) {
$(this).hide();
$(this).next('input.log_paw').show().focus();
}
});
$('input.log_paw').blur(function() {
var text_value = $(this).val();
if (text_value == '') {
$(this).prev('.show').show();
$(this).hide();
}
});
</script>
</body>
</html>
好了，代碼就在這里了，希望能幫助到你！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- input 輸入框獲得/失去焦點時隱藏/顯示文字(jquery版)
- jQuery實現(xiàn)表單input中提示文字value隨鼠標(biāo)焦點移進(jìn)移出而顯示或隱藏的代碼
- jquery實現(xiàn)input框獲取焦點的方法
- jquery實現(xiàn)input框獲取焦點的簡單實例
- 讓input框?qū)崿F(xiàn)類似百度的搜索提示(基于jquery事件監(jiān)聽)
- 基于jQuery的input輸入框下拉提示層(自動郵箱后綴名)
- jQuery簡單實現(xiàn)input文本框內(nèi)灰色提示文本效果的方法
- jquery實現(xiàn)input輸入框?qū)崟r輸入觸發(fā)事件代碼
- js與jquery實時監(jiān)聽輸入框值的oninput與onpropertychange方法
- jQuery實現(xiàn)input輸入框獲取焦點與失去焦點時提示的消失與顯示功能示例
相關(guān)文章
jQuery 處理網(wǎng)頁內(nèi)容的實現(xiàn)代碼
改變頁面內(nèi)容應(yīng)該算是Javascript最常用的功能，這包括更改已經(jīng)存在的頁面元素或者添加新的HTML元素。2010-02-02
jQuery模擬物體自由落體運動(附演示與demo源碼下載)
這篇文章主要介紹了jQuery模擬物體自由落體運動的方法,并附帶了效果演示與demo源碼下載,可真是模擬出球體自由落體運動及動能損耗的運動過程,需要的朋友可以參考下2016-01-01
html5的自定義data-*屬性和jquery的data()方法的使用示例
人們總喜歡往HTML標(biāo)簽上添加自定義屬性來存儲和操作數(shù)據(jù)，這就是為什么在HTML5規(guī)范里增加了一個自定義data屬性，你可以拿它做很多有用的事情2013-08-08
這篇文章主要介紹了jQuery實現(xiàn)列表的增加和刪除功能，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2018-06-06
這篇文章主要介紹了jQuery實現(xiàn)的導(dǎo)航下拉菜單效果,涉及jQuery響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-07-07
Jquery利用mouseenter和mouseleave實現(xiàn)鼠標(biāo)經(jīng)過彈出層且可以點擊
這篇文章主要介紹了Jquery利用mouseenter和mouseleave實現(xiàn)鼠標(biāo)經(jīng)過彈出層且可以點擊。需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
jQuery+css實現(xiàn)炫目的動態(tài)塊漂移效果
這篇文章主要介紹了jQuery+css實現(xiàn)的動態(tài)塊漂移效果,涉及jQuery基于隨機數(shù)與時間函數(shù)動態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01
我們一般都是用HTML表格來顯示結(jié)構(gòu)化數(shù)據(jù)，如今有很多的 jQuery 表格插件可以幫助我們更好的組織和控制表格數(shù)據(jù)，增強表格的功能和操作。今天要與大家分享的是18個非常優(yōu)秀的 jQuery 表格插件，有用到朋友可以參考一下。2011-04-04
這篇文章主要介紹了JqueryEasyUI $.Parser,需要的朋友可以參考下2017-06-06
jQuery學(xué)習(xí)筆記之Ajax用法實例詳解
這篇文章主要介紹了jQuery學(xué)習(xí)筆記之Ajax用法,結(jié)合實例形式較為詳細(xì)的分析總結(jié)了jQuery中ajax的相關(guān)使用技巧,包括ajax請求、載入、處理、傳遞等,需要的朋友可以參考下2015-12-12