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