快捷導(dǎo)航

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默認顯示，一個password默認隱藏，當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)文章

通過實例解析jQ Ajax操作相關(guān)原理
這篇文章主要介紹了通過實例解析jQ Ajax操作相關(guān)原理,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-09-09
一樣的table？不一樣的table(可編輯狀態(tài)table)
今天要分享的table不僅僅能顯示數(shù)據(jù)，還可以對數(shù)據(jù)進行編輯，當鼠標點擊數(shù)據(jù)時相應(yīng)的數(shù)據(jù)格就變成可編輯的狀態(tài)，廢話不多說，進入今天的主題
2012-09-09
使用jQuery.fn自定義jQuery翻頁插件
第一次寫jQuery插件;自己感覺寫的也不怎么樣。寫jQuery插件利用的就是這個東東jQuery.fn,寫的過程很詳細，感興趣的朋友可以了解下，希望本文對你使用自定義插件有幫助
2013-01-01
jQuery實現(xiàn)給頁面換膚的方法
這篇文章主要介紹了jQuery實現(xiàn)給頁面換膚的方法,涉及jQuery頁面元素的選擇與樣式的操作,需要的朋友可以參考下
2015-05-05
學(xué)習(xí)從實踐開始之jQuery插件開發(fā) 對話框插件開發(fā)
之所以寫下這篇文章，是想將我的想法分享給大家；對于初學(xué)者，我希望他能從這篇文章中獲取對他有用的東西，對于經(jīng)驗豐富的開發(fā)者，我希望他能指出我的不足，給我更多的意見和建議；目的就是共同進步
2012-04-04
jquery 層次選擇器siblings與nextAll的區(qū)別介紹
jquery 層次選擇器包括siblings與nextAll，本文為大家介紹下具體的使用方法，想學(xué)習(xí)的朋也可以參考下，希望對大家有所幫助
2013-08-08
jQuery layui常用方法介紹
layer是一款近年來備受青睞的web彈層組件，她具備全方位的解決方案，致力于服務(wù)各水平段的開發(fā)人員，您的頁面會輕松地擁有豐富友好的操作體驗，接下來通過本文給大家介紹layui常用方法，需要的朋友參考下
2016-07-07
jQuery插件HighCharts繪制2D餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D餅圖效果,結(jié)合完整實例形式分析了jQuery使用HighCharts插件繪制餅圖效果的操作步驟與相關(guān)實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
jquery簡單插件制作(fn.extend)完整實例
這篇文章主要介紹了jquery簡單插件制作(fn.extend)方法,結(jié)合完整實例形式分析了jQuery fn.extend擴展插件的實現(xiàn)技巧,需要的朋友可以參考下
2016-05-05
jQuery+CSS3實現(xiàn)點贊功能
本篇文章主要介紹了jQuery+CSS3實現(xiàn)點贊功能的示例代碼。具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03