用jquery实现输入框消失文字 .

最新推荐文章于 2023-03-14 13:40:30 发布

兵_哥哥

最新推荐文章于 2023-03-14 13:40:30 发布

阅读量565

点赞数

分类专栏：页面js验证

页面js验证专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>input test</title>
<meta name="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
//这里放置css
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//这里放置jquery代码
</script>
</head>
<body>
<form method="POST" id="user" action="">
User Name:<input type="text" name="username" value="Enter your name" /><br/>
PassWord:<input type="password" name="password" value="Enter your password" />
<input type="submit" name="sub" value="login" />
</form>
</div>
</body>
</html>

<html>                                                                                                                      
  <head>                                                                                                                    
    <title>input test</title>                                                                       
    <meta name="Content-Type" content="text/html; charset=UTF-8" />                                                         
<style type="text/css">                                                                                                     
//这里放置css  
</style>  
                                                                                                                  
<script type="text/javascript" src="js/jquery.js"></script>                                                             
<script type="text/javascript">                                                                                             
//这里放置jquery代码
</script>                                                                                                                   
  
  </head>                                                                                                                   
  
<body>                                                                                                                      
    <form method="POST" id="user" action="">                                                                                
      User Name:<input type="text"  name="username" value="Enter your name" /><br/>                                         
      PassWord:<input type="password"  name="password" value="Enter your password" />                                       
      <input type="submit" name="sub" value="login" />                                                                    
      </form> 
  </div>                                                                                                                    
</body>                                                                                                                     
  
</html>

下面加入jquery代码：

我使用了click 和blur内置事件类型处理，而且，只是对username框有效（因为密码框还有别的因素考虑）

[html] view plain copy print ?

<html>
<head>
<title>input test</title>
<meta name="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#username").click(
function(){
if($(this).val()=="Enter your name"){
$(this).val("");
}
})
$("#username").blur(
function(){
if($(this).val()=="")
{
$(this).val("Enter your name");
}
})
});
</script>
</head>
<body>
<div id="content">
<form method="POST" id="user" action="">
User Name:<input type="text" id="username" name="username" value="Enter your name" /><br/>
PassWord:<input type="password" name="password" value="Enter your password" />
<input type="submit" name="sub" value="login" />
</form>
</div>
</body>
</html>

<html>
  <head>
    <title>input test</title>
    <meta name="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">

</style>
    <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#username").click(
    function(){
    if($(this).val()=="Enter your name"){
    $(this).val("");
    }
    
})
$("#username").blur(
    function(){
    if($(this).val()=="")
    {
    $(this).val("Enter your name");
    }
})
});
</script>
  </head>
<body>
  <div id="content">
    <form method="POST" id="user" action="">
      User Name:<input type="text" id="username" name="username" value="Enter your name" /><br/>
      PassWord:<input type="password"  name="password" value="Enter your password" />
        <input type="submit" name="sub" value="login" />
    </form>
  </div>
</body>
</html>

2.做的更好

这样基本的原型就写成了，但是这个原型有许多的不足:
1.也许可以对密码框也使用这种方式，但是密码框的type类型是password,它不能显示，何来提示文字？
2. if($(this).val()=="")这种写法我可以接受，但是 if($(this).val()=="Enter your name"),你不觉得这很...要是我就想输这个呢...
3.提示文字用别的灰色的粗体表示，这样交互性是不是更强？
4.既然想要用两种字体表示，能不能把他们提取出来？写在.css里？这个是可以重用的啊!
解决办法:
1.密码框先让它的type是text的，等到点击了，我们再设置成password
2.用个变量来表示是否要切换吧。
3.设置不同的css.
4.用attr("class","class1"),attr("class","class2")来切换class,而不是引用id.(也就是说用.不用#)
下面是实现:

[html] view plain copy print ?

<html>
<head>
<title>input test</title>
<style type="text/css">
.default {
font-weight:bold;
color:#787878;
}
.puton{
font-weight:normal;
color:black;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var b=true;
$("#username").click(
function(){
if(b==true){
$(this).val("");
$(this).attr("class","puton");
b=false;
}
}
)
$("#username").blur(
function(){
if( $(this).val()==""){
$(this).val("Enter your name");
$(this).attr("class","default");
b=true;
}
}
)
});
$(document).ready(function(){
var b=true;
$("#password").click(
function(){
if(b==true){
$(this).val("");
$(this).attr("type","password");
$(this).attr("class","puton");
b=false;
}
})
$("#password").blur(
function(){
if( $(this).val()==""){
$(this).val("Enter your password");
$(this).attr("type","text");
$(this).attr("class","default");
b=true;
}
}
)
});
</script>
</head>
<body>
<div id="content">
<form method="POST" id="user" action="">
User Name:<input type="text" id="username" class="default" name="username" value="Enter your name" /><br/>
PassWord:<input type="text" id="password" class="default" name="password" value="Enter your password" />
<input type="submit" name="sub" value="login" />
</form>
</div>
</body>
</html>

<html>
  <head>
    <title>input test</title>
<style type="text/css">
.default {
font-weight:bold;
color:#787878;
}
.puton{
font-weight:normal;
color:black;
}
</style>
    <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
var b=true;
$("#username").click(
    function(){
        if(b==true){
        $(this).val("");
        $(this).attr("class","puton");
        b=false;
        }
        }
    )
 $("#username").blur(
    function(){
    if( $(this).val()==""){
        $(this).val("Enter your name");
        $(this).attr("class","default");
        b=true;
    }
}
)
});

$(document).ready(function(){
var b=true;
$("#password").click(
    function(){
    if(b==true){
    $(this).val("");
    $(this).attr("type","password");
    $(this).attr("class","puton");
    b=false;
    }
})
$("#password").blur(
    function(){
    if( $(this).val()==""){
        $(this).val("Enter your password");
        $(this).attr("type","text");
        $(this).attr("class","default");
        b=true;
    }
}
)
});


</script>
  </head>
<body>
  <div id="content">
    <form method="POST" id="user" action="">
      User Name:<input type="text" id="username" class="default" name="username" value="Enter your name" /><br/>
      PassWord:<input type="text" id="password"  class="default" name="password" value="Enter your password" />
        <input type="submit" name="sub" value="login" />
    </form>
  </div>
</body>
</html>

3.更多:
把css写到外部文件.

DRY原则!用插件来实现.

顺便说一下，我一直用的ubuntu，firefox，chrome都测试过，IE下确实没测试过，有人给我留言说IE下行不通，我想想解决办法吧，不要喷了...

初学jquery..这是学习笔记...

我在下一篇博客去完善.