码迷,mamicode.com
首页 > 其他好文 > 详细

input 提示信息

时间:2014-12-17 12:16:55      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   color   os   使用   sp   on   div   

1.input提示
     html:
1 <span class="input_tips">
2    <input name= "accout" type="text" class= "login_input login_name" value="" />
3       <div style= "position:relative ;color: #ccc">
4           <div class= "tips_content" style= "position:absolute ;top:- 45px; left:70 px"> 用户名 </div>
5       </div>
6 </span>

 

     js:
 1 $(".input_tips").click(function(){
 2     $(this).children("div").css("display","none");
 3     $(this).children("input").focus();//有时点击在div上时,没有这行不行
 4     $(this).children("input").focus(function(){//当使用tab切换时
 5         $(this).next("div").css("display", "none");
 6     });
 7     $(this).children("input").blur(function(){
 8         if(($(this).val())=="") {
 9             $(this).next("div").css("display", "block");
10         }
11     })
12 });

 

-----------------------------------分割线2014.12.17----------------------------------
发现以上代码有BUG:js中只有当每个input的click事件都触发了,相应的input的focus、blur事件才会注册,然后才会被触发,改成下面的代码就行啦:
 1 $ (".input_tips").children ("input").focus (function(){ //当使用tab切换时
 2     $ (this). next("div" ).css( "display" , "none") ;
 3 });
 4 $(".input_tips" ).children( "input" ).blur( function(){
 5     if(( $(this). val())=="" ) {
 6         $ (this). next("div" ).css( "display" , "block" );
 7     }
 8 });
 9 $(".input_tips" ).click( function(){
10     $(this). children("div" ).css( "display" ,"none") ;
11     $ (this). children("input" ).focus() ;//有时点击在 div上时,没有这行不行
12 });

 

 
上面的第一种情况:将focus事件放在click事件里面,只有当没一个input的click事件都触发执行一边后,对应input的focus事件
                              才会被绑定,所以BUG就出现了,当我点击了第一个input,后面通过tab切换,后面的input的focus事件
                              就没有被绑定过,也就不是执行focus事件了,blur事件同理。
小结:这两片段代码证明,jquery事件在被触发前都要先绑定(注册)。

input 提示信息

标签:style   blog   io   color   os   使用   sp   on   div   

原文地址:http://www.cnblogs.com/liushiyong1/p/4168945.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!