$("#address").focus(function(){
    var address_text = $(this).val();
    if(address_text=="請(qǐng)輸入郵箱地址"){
      $(this).val("");
    }
  });
$("#address").blur(function(){
    var address_value = $(this).val();
    if(address_value==""){
      $(this).val("請(qǐng)輸入郵箱地址")
    }
  });

完整的小例子

完整的代碼如下，尤其注意<input type="text" id="password">的實(shí)現(xiàn)！

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>文本輸入框中內(nèi)容的提示效果</title>
  <script type="text/javascript" src="jquery-2.2.4.min.js"></script>
</head>
<body>
<script>
$(function(){
  $("#address").focus(function(){
    var address_text = $(this).val();
    if(address_text=="請(qǐng)輸入郵箱地址"){
      $(this).val("");
    }
  });
  $("#password").focus(function(){
    var password_text = $(this).val();
    if(password_text=="請(qǐng)輸入密碼"){
      $(this).attr("type","password");
      $(this).val("");
    }
  });
  $("#address").blur(function(){
    var address_value = $(this).val();
    if(address_value==""){
      $(this).val("請(qǐng)輸入郵箱地址")
    }
  });
  $("#password").blur(function(){
    var password_value = $(this).val();
    if(password_value==""){
      $(this).attr("type","text");
      $(this).val("請(qǐng)輸入密碼")
    }
  });
});
</script>
<div align="center">
  <input type="text" id ="address" value="請(qǐng)輸入郵箱地址"><br><br>
  <input type="text" id ="password" value="請(qǐng)輸入密碼"><br><br>
  <input type="button" name="登錄" value="登陸">
</div>
</body>
</html>

$(function(){});其就是$(document).ready(function(){});的縮寫。這個(gè)倒不是什么重點(diǎn)。

$(this).attr(“type”,”password”);將當(dāng)前對(duì)象（也就是獲取鼠標(biāo)焦點(diǎn)的輸入框）的屬性值進(jìn)行動(dòng)態(tài)的改變。達(dá)到輸入數(shù)據(jù)的時(shí)候以密碼框的形式出現(xiàn)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: