點選文字框刪除提示文字效果程式碼

admin發表於2017-03-09

很多表單都有這樣的效果，文字框帶有預設的提示文字，當點選文字框的時候，能夠將文字框的內容刪除，當焦點離開文字框的時候，並且文字框中的內容為空，那麼再將文字框中的值設定我i提文字，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type ="text/javascript" >
$(function () {
  $("#address").focus(function () {
    var txt_value = $(this).val();
    if (txt_value == "請輸入郵箱地址") {
      $(this).val("");
    }
  });
  $("#address").blur(function () {
    var txt_value = $(this).val();
    if (txt_value == "") {
      $(this).val("請輸入郵箱地址");
    }
  })
});
</script>
</head>
<body>
<input type ="text" id ="address" value ="請輸入郵箱地址" />
<input type ="button" value ="登入" />
</body>
</html>

以上程式碼實現了我們的要求，下面簡單介紹一下實現原理:

當文字框獲得焦點的時候，首先會判斷文字框的值是否和預設提示文字相同，如果相同就清空，當文字框失去焦點的時候，會判斷文字框的值是否為空，如果為空就再將文字框的值設定為預設提示文字。

相關文章