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(){ // 失去焦点时
    if($(this).val()=="") $(this).val(temval); //如果此时没有填写任何东西 那么恢复初始值
    if(className) $(this).removeClass(className); //取消标识当前状态
    })
 }

使用也很简单：

<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