密碼框提示文字效果程式碼例項

螞蟻小編發表於2017-03-25
密碼

這是比較常見的效果，比如在文字框內預設有提示輸入文字，當使用者點選文字框的時候能夠清除提示內容。

當然對於文字框實現非常的容易，密碼框則有所不同，因為它的內容不是明文的，所以要進行一些特別的改動才行。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#pw").focus(function(){
    $(this).val("");
    $(this).prop("type","password");
  })
  $("#pw").blur(function(){
    if($(this).val()==""){
      $(this).val("請輸入網站名稱");
      $(this).prop("type","text");
    }
  })
})
</script> 
</head> 
<body> 
<input type="text" id="pw" value="請輸入網站名稱"/>
</body> 
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

1.$(document).ready(function(){})，當文件結構載入完畢再去執行函式中的程式碼。

2.$("#pw").focus(function(){}),為文字框註冊focus事件處理函式。

3.$(this).val("")，將文字框的值清空。

4.$(this).prop("type","password")，將文字框轉換為密碼框，因為預設狀態下是文字框，否則無法顯示提示文字。

5.$("#pw").blur(function(){})，為密碼框註冊blur事件處理函式。

6.if($(this).val()=="")，如果密碼框的值為空。

7.$(this).val("請輸入網站名稱")，就將預設提示內容還原。

8.$(this).prop("type","text")，再將密碼框轉換為文字框。

二.相關閱讀:

1.focus事件可以參閱jQuery focus 事件一章節。

2.val()函式可以參閱jQuery val()一章節。

3.prop()函式可以參閱jQuery prop()一章節。

4.blur事件可以參閱jQuery blur 事件一章節。

相關文章