我們都知道HTML5的input新屬性有 placeholder="",那么這個不兼容IE低版本我們只能用腳本來寫了。
首先HTML新建一個input
<input type="text" class="input" value="請輸入搜索內容" />
然后我們再引入相應的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隱藏,沒有輸入內容失去焦點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>好了,代碼就在這里了,希望能幫助到你!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答