您的当前位置：首页正文

jQuery动态修改输入框的值和placeholder

来源：易榕旅网

首先是动态修改数据框的值：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>XXX</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }

            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
     </style>
     <!--引入jquery的js库-->
    </head>
    <body>
         <input type="text" value="用户邮箱/手机号/用户名"  id="b1"/><br>
         <input type="password" value=""  id="b2"/><br>
         <input type="button" value="登陆"  id="b3"/>

         <br>   
    </body>
<script language="JavaScript">
    $("#b1").focus(function(){
        if($(this).val()==this.defaultValue){
            $(this).val("");
        }
    });

    $("#b1").blur(function(){
        if($(this).val()==""){
            $(this).val(this.defaultValue);
        }
    });

</script>

</html>

　　
　　
　　
再来是是动态修改placeholder的值：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>XXX</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }

            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
     </style>
     <!--引入jquery的js库-->
    </head>
    <body>
         <input type="text" placeholder="用户邮箱/手机号/用户名"  id="b1"/><br>
         <input type="password" value=""  id="b2"/><br>
         <input type="button" value="登陆"  id="b3"/>

         <br>   
    </body>
<script language="JavaScript">
    $("#b1").focus(function(){
            $(this).attr('placeholder',"");
    });

    $("#b1").blur(function(){
        if($(this).val()==""){
         $(this).attr('placeholder','${sessionScope.xxxxxxx}');
        }
    });

</script>

</html>

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文