autoTip飞飞的基于jquery的input表单输入框默认提示
日期:2010-09-23 18:58:53 来源:网络收集
本插件是为输入用户名的提示信息而写的。功能虽然简单但对于做开发的人来说每次写这几行代码也实属繁琐,所以我就把这几行代码写成了jquery的插件以求以后用起来更加便捷。
简单说明:
1.可以自动默认提示信息,若不设置则默认值为:用户名/邮箱
2.当input获得焦点时,input的值会被自动清除;当input失去焦点时,会判断输入值与默认值是否一致,如果一致(或空)则再次显示默认提示信息,若不一致(已输入信息)则input值为所输入值
3.此插件是jquery插件,调用方式为*$("#xxx").autoTip();并可以指定input获得焦点和失去焦点的CSS样式。以下为参数说明
+------------------------------------------------------------------------------
*参数
*@input入参
*json对象
*@dvalueinput表单提示默认值
*@tip默认提示信息样式名class
*@tipnone在指定的input执行click时替换的样式名class
+------------------------------------------------------------------------------
*使用方法:
*$("#xxx").autotip();
*@#xxx为需要提示的input的id
插件源码
[code]
$.fn.autoTip=function(G){
/**
+------------------------------------------------------------------------------
*input用户名自动提示插件
+------------------------------------------------------------------------------
*@author飞飞
*@version1.0
*@QQ276230416
+------------------------------------------------------------------------------
*参数
*@input入参
*json对象
*@dvalueinput表单提示默认值
*@tip默认提示信息样式名class
*@tipnone在指定的input执行click时替换的样式名class
+------------------------------------------------------------------------------
*使用方法:
*$("#xxx").autotip();
*@#xxx为需要提示的input的id
*/
varD;
D={
dvalue:"用户名/电子邮箱",//表单默认值
tip:"tip",//默认提示信息样式名class
tipnone:"tipnone"//在指定的input执行click时替换的样式名class
};
$.extend(D,G);
if($(this).val()==""){
$(this).val(D.dvalue)
.addClass(D.tip)
.click(function(){
if($(this).val()==D.dvalue){
$(this).val("");
$(this).removeClass(D.tip);
$(this).addClass(D.tipnone);
}
})
.blur(function(){
if($(this).val()==""){
$(this).removeClass(D.tipnone);
$(this).addClass(D.tip);
$(this).val(D.dvalue);
}
});
};
}
[/code]
简单说明:
1.可以自动默认提示信息,若不设置则默认值为:用户名/邮箱
2.当input获得焦点时,input的值会被自动清除;当input失去焦点时,会判断输入值与默认值是否一致,如果一致(或空)则再次显示默认提示信息,若不一致(已输入信息)则input值为所输入值
3.此插件是jquery插件,调用方式为*$("#xxx").autoTip();并可以指定input获得焦点和失去焦点的CSS样式。以下为参数说明
+------------------------------------------------------------------------------
*参数
*@input入参
*json对象
*@dvalueinput表单提示默认值
*@tip默认提示信息样式名class
*@tipnone在指定的input执行click时替换的样式名class
+------------------------------------------------------------------------------
*使用方法:
*$("#xxx").autotip();
*@#xxx为需要提示的input的id
插件源码
[code]
$.fn.autoTip=function(G){
/**
+------------------------------------------------------------------------------
*input用户名自动提示插件
+------------------------------------------------------------------------------
*@author飞飞
*@version1.0
*@QQ276230416
+------------------------------------------------------------------------------
*参数
*@input入参
*json对象
*@dvalueinput表单提示默认值
*@tip默认提示信息样式名class
*@tipnone在指定的input执行click时替换的样式名class
+------------------------------------------------------------------------------
*使用方法:
*$("#xxx").autotip();
*@#xxx为需要提示的input的id
*/
varD;
D={
dvalue:"用户名/电子邮箱",//表单默认值
tip:"tip",//默认提示信息样式名class
tipnone:"tipnone"//在指定的input执行click时替换的样式名class
};
$.extend(D,G);
if($(this).val()==""){
$(this).val(D.dvalue)
.addClass(D.tip)
.click(function(){
if($(this).val()==D.dvalue){
$(this).val("");
$(this).removeClass(D.tip);
$(this).addClass(D.tipnone);
}
})
.blur(function(){
if($(this).val()==""){
$(this).removeClass(D.tipnone);
$(this).addClass(D.tip);
$(this).val(D.dvalue);
}
});
};
}
[/code]
您可能感兴趣的脚本
菜单导航2013-02-27
菜单导航2009-05-04
菜单导航2010-07-13
焦 点 图2013-03-05
悬浮漂浮2010-05-18
菜单导航2017-04-18
焦 点 图2009-07-27
相册代码2009-05-20
菜单导航2011-08-25
在线客服2011-12-19
在线客服2014-04-15
图片特效2013-02-18
菜单导航2009-09-16
图片特效2010-05-23
相册代码2009-04-30
焦 点 图2014-12-04
菜单导航2010-07-20
相册代码2009-07-28
悬浮漂浮2010-09-03
图片特效2014-10-16
焦 点 图2009-11-09
菜单导航2015-01-04
悬浮漂浮2009-11-12
菜单导航2011-09-26