自动提示输入信息效果的jquery插件

这是小剧实验室的第一篇文章，很是激动，就拿一个比较简单的特效来写吧。这是很多博客、留言等等都会用到的特效。其实这个效果很简单，就是每个输入框在输入之前都会有一个默认的值，点击之后自动清空，当输入框失去焦点的时候，如果没有输入任何字符，输入框再恢复为原来的默认值。下面是体验效果：

实现这个效果最常见的做法如下：

<input name="keyboard" type="text" size="10" id="keyboard" value="搜索站内内容" onclick="if (this.value=='搜索站内内容') this.value=''" onblur="if (value ==''){value='搜索站内内容'}"/>

很明显，这种js与html混杂在一起的写法很不利于页面的清洁和高效率的开发。于是就有了函数调用的写法，这里就不贴代码了，因为这样也并未真正做到js与html分离。比较专业一点儿的写法是下面这样的（这里使用的jquery框架）：

//html部分
<input name="keyboard" type="text" size="10" id="keyboard" value="搜索站内内容"/>

//js部分
$(docunment).ready(function(){
  $('#keyboard').click(function(){
    if($(this).attr('value')=="搜索站内内容"){
      $(this).attr('value','');
    }
  });
  $('#keyboard').blur(function(){
    if($(this).attr('value')==") {
      $(this).attr('value',"搜索站内内容");
    }
  });
});

这样，页面就简洁多了，但是代码优化到这儿就完事了么，当页面存在大量需要自动隐藏显示提示符的输入框时，岂不是每个地方都要写上这么一坨代码，很自然，你会想到封装函数，但函数一定好用么？小剧向来喜欢把问题纠结到无法继续纠结下去的地步，所以就有了今天要提出的插件。

关于自动提示输入信息效果jquery插件解释

下面是插件源码，这里小剧把实现效果的整段代码的核心部分提取出来，简化封装为这一插件。

$.fn.autoKey=function(){
  var searchBox = $(this);
  var title=searchBox.val(); 
  searchBox.click(function(){
    if(searchBox.val()==title){
      searchBox.val(");
    }
  }).blur(function(){
    if(searchBox.val()==") {
      searchBox.val(title);
    }
  });
  return searchBox;
}

插件使用方法

因为插件就几行代码，所以没必要单独引用一个文件，只要你正确引用了jquery文件，再把插件代码拷贝到你的js文件中里，然后就可以随意使用了。

//下面是插件源码
$.fn.autoKey=function(){
  var searchBox = $(this);
  var title=searchBox.val(); 
  searchBox.click(function(){
    if(searchBox.val()==title){
      searchBox.val(");
    }
  }).blur(function(){
    if(searchBox.val()==") {
      searchBox.val(title);
    }
  });
  return searchBox;
}
//上面是插件源码

//通用格式
$(你的选择器).autoKey();

//下面是示例
$('#username').autoKey();
$('.check').autoKey();
$('#username, .check').autoKey();

效果实现起来很简单，如果你的网页中需要自动提示输入信息效果的效果，欢迎下载源码学习使用。

源码下载