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>
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>,是什么意思呢
最佳答案
0
代码解释：
同意幻天芒：
监听$("#focus .input_txt") 标签("#focus .input_txt")的意思是id为#focus下面的class为 .input_txt的text类型的dom
如果值为空 当前节点(this)的兄弟span节点就显示(show) 。
2：并且监听他的focus 和key事件(这里是绑定的 bind 次方法一般用于动态创建的dom) 后面的逻辑都是一样的 什么有值 什么隐藏或者显示 这样的逻辑。
3：写这样的代码的人不知道什么是性能
收获园豆：4
其他回答(3)
0
没明白你想干什么。
收获园豆：2
0
其实这个在新版浏览器中，就是一属性placeHolder
要实现这种效果，应该监听focus和blur。
收获园豆：2
0
通过样式来控制内容的隐藏和显示，这样不用全给 input 去控制，这种前端的写法不错
收获园豆：2
