jQuery 插件 输入框focus效果 编写自己的插件

在项目中经常会用到 input 输入框的默认文字放上去消失 方便输入新的内容 或者有一种focus状态 提示目前这个框是 active的

下面我们分析下这个简单的功能 都有哪些：

1 输入框 获得焦点 如果是默认文字 则输入框内容为空 方便输入新内容

2 输入框获得焦点 有可能要标识 当前获得焦点的状态 此功能可选

3 输入框失去焦点 如果输入框内容为 默认提示文字 或者输入框为空 则输入框显示为默认提醒文字 比如“请输入关键字”等等

我们来编写这个叫做inputval的插件

 1  $.fn.inputval = function (className){  // className （当前状态的类名） 是唯一的参数 而且可选
 2  var  _this = $( this );  //  获取使用插件的对象
 3  className =  className  ||   "" ;  // 是否有className 参数
 4  _this.focus( function (){  // 获得焦点时  
 5     temval = $( this ).val();  // 用 temval 记载它起始的值 
 6     $( this ).val( "" );  // 清空输入框
 7    if(className) $( this ).addClass(className);  // 标识当前输入框
 8     })
 9     .blur( function (){  //  失去焦点时
10      if ($( this ).val() == "" ) $( this ).val(temval);  // 如果此时没有填写任何东西 那么恢复初始值
11     if(className) $( this ).removeClass(className);  // 取消标识当前状态
12     })
13  }

使用也很简单：

< div  class ="inputcon"  id ="testinput" >
     < p >
         < input  type ="text"  value ="原始值uuuuuu"   />
     </ p >
     < p >
         < input  type ="text"  value ="原始值XXXXX"   />
     </ p > 

</div>

<script type="text/javascript">    
/* <![CDATA[ */ 
$(document).ready(function(){
    $("#testinput").find("input").inputval("cur"); //此处 "cur" 是当前样式 如果不需要标记也可以为空 
    })
/* ]]> */    

</script 

转载于:https://www.cnblogs.com/trance/archive/2009/04/23/1442122.html