首页新闻找找看学习计划

Jqury 文本框输入文字,提示文字消失(有一处语法请教)

0
悬赏园豆:10 [已解决问题] 解决于 2013-08-07 22:15

大家好: 

    源码中:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){

            $("#focus .input_txt").each(function(){
                    var thisVal=$(this).val();
                    //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示
                    if(thisVal!=""){
                            $(this).siblings("span").hide();
                        }else{
                            $(this).siblings("span").show();
                        }
                    //聚焦型输入框验证    
                    $(this).focus(function(){
                            $(this).siblings("span").hide();
                        }).blur(function(){
                                var val=$(this).val();
                                if(val!=""){
                                    $(this).siblings("span").hide();
                                }else{
                                    $(this).siblings("span").show();
                                }    
                        });
                })
                $("#keydown .input_txt").each(function(){
                    var thisVal=$(this).val();
                    //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示
                    if(thisVal!=""){
                            $(this).siblings("span").hide();
                        }else{
                            $(this).siblings("span").show();
                        }
                        $(this).keyup(function(){
                            var val=$(this).val();
                            $(this).siblings("span").hide();
                        }).blur(function(){
                                var val=$(this).val();
                                if(val!=""){
                                    $(this).siblings("span").hide();
                                }else{
                                    $(this).siblings("span").show();
                                }
                            })
                    })    
        })
</script>
<style type="text/css">
    form{width:400px;margin:10px auto;border:solid 1px #E0DEDE;background:#FCF9EF;padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;}
    label{display:block;height:40px;position:relative;margin:20px 0;}
    span{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;}
    .input_txt{width:398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;text-indent: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;}
</style>
</head>

<body>
    <form class="border_radius" id="focus">
        <h2>聚焦型提示语消失</h2>
        <label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius"  /></label>
        <label><span>密码</span><input type="text" class="input_txt border_radius" /></label>
    </form>
    <form class="border_radius" id="keydown">
        <h2>输入型提示语消失</h2>
        <label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius"  /></label>
        <label><span>密码</span><input type="text" class="input_txt border_radius" /></label>
    </form>

</body>
</html>
View Code Jq

1.<label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius"  /></label>

 

2. input type="text" class="input_txt border_radius"  value="花瓣注册邮箱"/>

Q:->1.2写法的效果相同,

   ->1.中的 <label><span><input></input></span><label>,是什么意思呢

   

Frank铭的主页 Frank铭 | 初学一级 | 园豆:3
提问于:2013-06-29 18:51
< >
分享
最佳答案
0

代码解释:

同意幻天芒

监听$("#focus .input_txt") 标签("#focus .input_txt")的意思是id为#focus下面的class为 .input_txt的text类型的dom

如果值为空 当前节点(this)的兄弟span节点就显示(show) 。

2:并且监听他的focus 和key事件(这里是绑定的 bind 次方法一般用于动态创建的dom) 后面的逻辑都是一样的 什么有值 什么隐藏或者显示 这样的逻辑。

3:写这样的代码的人不知道什么是性能

收获园豆:4
s_p | 菜鸟二级 |园豆:269 | 2013-06-30 02:00
其他回答(3)
0

没明白你想干什么。

收获园豆:2
顾晓北 | 园豆:9520 (大侠五级) | 2013-06-29 21:56
0

其实这个在新版浏览器中,就是一属性placeHolder

要实现这种效果,应该监听focus和blur。

收获园豆:2
幻天芒 | 园豆:36522 (高人七级) | 2013-06-29 22:51
0

通过样式来控制内容的隐藏和显示,这样不用全给 input 去控制,这种前端的写法不错

收获园豆:2
Yu | 园豆:12944 (专家六级) | 2013-06-30 22:14
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册