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}

 

//提示语
(function($){
  $.fn.pointout=function(options){
    var setoptions = {
      firstColor:'#ccc',//获取焦点没有输入时提示语颜色
      secondColor:'#666',//有输入时提示语颜色
      treeColor:'#aaa',//没有输入提示语颜色
      wordsName:'#emailpassworld span' //提示语class或id
    }
    var opts = $.extend(setoptions,options);
    return $(this).each(function(){
      var $this = $(this)
      interval = setInterval(warningshow, 100)
      function warningshow(){
        if( $this.val().trim() ==''){
           $(setoptions.wordsName).show()
        } else {
           $(setoptions.wordsName).hide()
        }
      }
       $this.bind({
         focus:function(){
           $(setoptions.wordsName).css('color',setoptions.firstColor)
           $this.css('color',setoptions.secondColor)
         },
         focusout:function(){
           if($this.val() != '' ) {
             $(setoptions.wordsName).css('color',setoptions.secondColor)
           } else {
             $(setoptions.wordsName).css('color',setoptions.treeColor)
           }
         }
      })
      $(setoptions.wordsName).click(function(){
          var $that = $this;
           $(setoptions.wordsName).css('color',setoptions.firstColor)
           $that.focus()
      })
    })
  }
})(jQuery);

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