jQuery制作input提示內(nèi)容（兼容IE8以上）

更新時間：2017年07月05日 11:41:23 作者：小張228

這篇文章主要為大家詳細介紹了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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(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)列表的增加和刪除功能
這篇文章主要介紹了jQuery實現(xiàn)列表的增加和刪除功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧
2018-06-06
jQuery實現(xiàn)的導(dǎo)航下拉菜單效果
這篇文章主要介紹了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
再次分享18個非常棒的jQuery表格插件
我們一般都是用HTML表格來顯示結(jié)構(gòu)化數(shù)據(jù)，如今有很多的 jQuery 表格插件可以幫助我們更好的組織和控制表格數(shù)據(jù)，增強表格的功能和操作。今天要與大家分享的是18個非常優(yōu)秀的 jQuery 表格插件，有用到朋友可以參考一下。
2011-04-04
Jquery EasyUI $.Parser
這篇文章主要介紹了JqueryEasyUI $.Parser,需要的朋友可以參考下
2017-06-06
jQuery學(xué)習(xí)筆記之Ajax用法實例詳解
這篇文章主要介紹了jQuery學(xué)習(xí)筆記之Ajax用法,結(jié)合實例形式較為詳細的分析總結(jié)了jQuery中ajax的相關(guān)使用技巧,包括ajax請求、載入、處理、傳遞等,需要的朋友可以參考下
2015-12-12