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

时间:2012年07月13日 作者:剧中人

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

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

<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();

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

源码下载