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
版权所有,可以转载!

原文地址:https://www.cnblogs.com/yingcaiyi/p/2807690.html