方法一：【适用于PC端】 label方式提示：方便设置提示的颜色和输入时的颜色。并且可以避免： PC端不支持Css3里的placeholder属性的浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单聚焦失焦 提示自动消失</title>
    <style>
    .main{ width:100%; max-width:640px; margin: 0 auto; border:#eee 1px solid;}
    .form_list{}
    .form_list li{position:relative; overflow:hidden; margin:10px auto;}
    .form_list label{ position:absolute; left:60px; top:0px; cursor:text; font-size:14px; color:#aeafaf;}
    .form_list li input{ color:#000;}
    .main p{ padding:5% 5%; line-height:30px;}
    </style>
</head>
<body>

<div class="main">

    <ul class="form_list">
        <li>
            <b>姓名：</b>
            <label for="name">请输入姓名</label>
            <input type="text" id="name">
        </li>
        <li>
            <b>电话：</b>
            <label for="tel">请输入您的电话号码</label>
            <input type="text" id="tel">
        </li>
        <li>
            <b>邮箱：</b>
            <label for="mail">请输入您的邮箱</label>
            <input type="text" id="mail">
        </li>
        <li>
            <b>地址：</b>
            <label for="dizhi">请输入您的详细地址</label>
            <input type="text" id="dizhi">
        </li>
        <li>
            <b>证件：</b>
            <label for="zj">请输入您的证件号码</label>
            <input type="text" id="zj">
        </li>
    </ul>

　　<p>备注：通过label匹配id的方式进行获取焦点和失去焦点 提示自动消失。<br>
　　　　优点：1.方便设置提示的颜色和输入时的颜色。<br>
            2.避免 PC端不支持Css3里的placeholder属性的浏览器
　　</p>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    
    $(".form_list input").each(function(){
        var thisVal=$(this).val();
        //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
        if(thisVal!=""){
            $(this).siblings("label").hide();
        }else{
            $(this).siblings("label").show();
        }
        //聚焦型输入框验证 
        $(this).focus(function(){
            $(this).siblings("label").hide();
        }).blur(function(){
            var val=$(this).val();
            if(val!=""){
                 $(this).siblings("label").hide();
            }else{
                 $(this).siblings("label").show();
            } 
        });
    })    

</script>    
</body>
</html>

 

注意：for 与 id相对应。。

---------------------------------------------------------------------------------------------------

方法二：【适用于移动端】通过value值进行判断，方便判断但是无法区分提示时的文字颜色和输入时的颜色。。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text" class="username">
    <input type="text" class="usertel">

   <script type="text/javascript">
    $(".username,.usertel").focus(function(){
        if($(this).val()==this.defaultValue){
            $(this).val("");
            $(this).focus();
            return false;
        }
    }).blur(function(){
        if($(this).val()==""){
            $(this).val(this.defaultValue);
            $(this).focus();
            return false;
        }
    });
    </script>
</body>
</html>


js代码：

$(".username,.usertel").focus(function(){  //获取焦点
    if ($(this).val()==this.defaultValue){
         $(this).val("");
    }
}).blur(function(){   //失去焦点
    if ($(this).val()==""){
        $(this).val(this.defaultValue);
    }
})

--------------------------------------------------------------------------------------

方法三：【适用于移动端】 placeholder方法：简单方便使用，但是pc端一些浏览器不支持该属性。。。

<input type="text" placeholder="你的姓名" name="lname">

 

给心灵一个纯净空间，让思想，情感，飞扬！