jquery文本框默认文字点击消失的效果

代码2015-06-242,597 人已阅来源：网络

jquery文本框默认文字点击消失，多应用于登录注册的时候，来提示用户输入相关信息，能非常好的提升用户体验。

这个特效共有两种效果，一种是：聚焦型提示语消失，即鼠标点击input时就消失了；还有一种是：输入型提示语消失，即点击时提示语并没有消失，当你开始输入文字时，才消失。

这个特效是通过js实现的，所以兼容性很强大噢…

当然，如果不考虑低端浏览器的话，完全也可以使用css3来实现placeholder=""。

看看demo效果吧

运行代码

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery文本框默认文字点击消失的效果 - web前端资源网 www.tonjay.com</title>
    <script src="https://libs.baidu.com/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#focus .input_txt").each(function () {
                var thisVal = $(this).val();
                //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
                if (thisVal != "") {
                    $(this).siblings("#focus label").hide();
                } else {
                    $(this).siblings("#focus label").show();
                }
                //聚焦型输入框验证
                $(this).focus(function () {
                    $(this).siblings("#focus label").hide();
                }).blur(function () {
                    var val = $(this).val();
                    if (val != "") {
                        $(this).siblings("#focus label").hide();
                    } else {
                        $(this).siblings("#focus label").show();
                    }
                });
            })
            $("#keydown .input_txt").each(function () {
                var thisVal = $(this).val();
                //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示 www.tonjay.com
                if (thisVal != "") {
                    $(this).siblings("#keydown label").hide();
                } else {
                    $(this).siblings("#keydown label").show();
                }
                $(this).keyup(function () {
                    var val = $(this).val();
                    $(this).siblings("#keydown label").hide();
                }).blur(function () {
                    var val = $(this).val();
                    if (val != "") {
                        $(this).siblings("#keydown label").hide();
                    } else {
                        $(this).siblings("#keydown label").show();
                    }
                })
            })
        })
    </script>
</head>
<style type="text/css">
    form {width:400px;margin:10px auto;border:solid 1px #E0DEDE;background:#FCF9EF;padding:20px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;font-family:Arial;}
    .tonjay {display:block;height:40px;position:relative;margin:20px 0;}
    #focus label,#keydown label {position:absolute;line-height:40px;left:10px;top:0;color:#ccc;cursor:text;background:none;}
    .input_txt {width:398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;line-height:38px;padding-left:10px;}
    .input_txt:focus {box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;}
    .border_radius {border-radius:5px;color:#B00000;}
    h2 {font-family:"微软雅黑";text-shadow:1px 1px 3px #fff;padding:0;margin:0;}
</style>
<body>
    <form class="border_radius" id="focus">
        <h2>聚焦型提示语消失</h2>
        <div class="tonjay">
            <input type="text" class="input_txt border_radius" id="Input" /><label for="Input">web前端资源网 -
                www.tonjay.com</label>
        </div>
        <div class="tonjay">
            <input type="text" class="input_txt border_radius" id="Input2" /><label for="Input2">输入用户名</label>
        </div>
    </form>
    <form class="border_radius" id="keydown">
        <h2>输入型提示语消失</h2>
        <div class="tonjay">
            <input type="text" class="input_txt border_radius" id="Input3" /><label for="Input3">web前端资源网 -
                www.tonjay.com</label>
        </div>
        <div class="tonjay">
            <input type="text" class="input_txt border_radius" id="Input4" /><label for="Input4">输入用户名</label>
        </div>
    </form>
</body>
</html>

AIHX

jquery文本框默认文字点击消失的效果

看看demo效果吧

相关内容