js 输入框内提示信息插件！

结构如下

            <ul>
              <li id='emailpassworld'>
                <span>请输入注册邮箱</span>
              	<input type="text" name='findpassword' class="w-txt w-txt-init" value=""/>
              </li>
            </ul>

　

#emailpassworld{position:relative;}
#emailpassworld span { position:absolute; top:22px; left:14px; z-index:100;color:#666}


 

 1 //提示语
 2 (function($){
 3   $.fn.pointout=function(options){
 4     var setoptions = {
 5       firstColor:'#ccc',//获取焦点没有输入时提示语颜色
 6       secondColor:'#666',//有输入时提示语颜色
 7       treeColor:'#aaa',//没有输入提示语颜色
 8       wordsName:'#emailpassworld span' //提示语class或id
 9     }
10     var opts = $.extend(setoptions,options);
11     return $(this).each(function(){
12       var $this = $(this)
13       interval = setInterval(warningshow, 100)
14       function warningshow(){
15         if( $this.val().trim() ==''){
16            $(setoptions.wordsName).show()
17         } else {
18            $(setoptions.wordsName).hide()
19         }
20       }
21        $this.bind({
22          focus:function(){
23            $(setoptions.wordsName).css('color',setoptions.firstColor)
24            $this.css('color',setoptions.secondColor)
25          },
26          focusout:function(){
27            if($this.val() != '' ) {
28              $(setoptions.wordsName).css('color',setoptions.secondColor)
29            } else {
30              $(setoptions.wordsName).css('color',setoptions.treeColor)
31            }
32          }
33       })
34       $(setoptions.wordsName).click(function(){
35           var $that = $this;
36            $(setoptions.wordsName).css('color',setoptions.firstColor)
37            $that.focus()
38       })
39     })
40   }
41 })(jQuery);

调用方式如下： $("input[name='findpassword']").pointout();
现在比较流行的提示方式，获取焦点后输入框内的提示语不消失！开始输入到时候提示语消失文字变色，看起来很酷似的，其实很简单，项目需要，洒家就给封装了一个插件，希望能帮助到其他的工程师！2012-12-07
版权所有，可以转载！

posted @ 2012-12-07 17:35  river.cao  阅读(962)  评论(1)  编辑  收藏  举报