首页jquery input失去焦点事件实例介绍
点播： 2018-01-04
没什么时间学习，一切都是工作中积累、学习，写博客只为记录，积累知识。
同一个页面有多个input输入框，并带有默认的value值，并且类名一样，这时候我们可以使用jquery遍历所有input，简单几行代码就搞定input获得焦点和失去焦点的状态。
代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>input获得焦点和失去焦点的切换</title>
</head>
<body>
<input type="text" class="input_demo" value="输入产品关键词进行搜索" />
<input type="text" class="input_demo" value="输入快递单号进行查询" />
<input type="text" class="input_demo" value="输入姓名搜索信息" />
</body>
</html>
向上面，页面中有多个同类名（input_demo）的input，如果我们想让它们在输入切入时，默认的value值消失，input输入框失去焦点的时候，如果没有输入内容，那就让原来的默认value值填充回来。当然，如果已经输入了内容，即使焦点失去，内容就不会消失。
因为有多个，所以进行遍历操作，jquery代码如下(当然，页面头部得自行再引入jquery库文件)：
代码如下
$(function(){
$('.input_demo').each(function(){ //开始遍历
var $val=$(this).val(); //将各个input的默认值都保存出来。
$(this).focus(function(){
if($(this).val()==$val){$(this).val("");} //获得焦点时进行判断，如果当前的value值是默认的才进行清空
})
$(this).blur(function(){
if($(this).val().length==0){$(this).val($val)} //失去焦点时进行判断，如果value值的长度等于0（也就是空的时候，
//没有输入内容的清空下），将原先保存的value值写入
})
});
})