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(){ // 失去焦点时
10    if($(this).val()=="") $(this).val(temval); //如果此时没有填写任何东西那么恢复初始值
11    if(className) $(this).removeClass(className); //取消标识当前状态
12    })
13 }

使用也很简单：

</div>

</script

转载于:https://www.cnblogs.com/trance/archive/2009/04/23/1442122.html

jQuery 插件输入框focus效果编写自己的插件相关推荐

jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示在线预览下载地址实例代码 <!DOCTYPE html> <html lang="en& ...
推荐20款基于 jQuery CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
优秀的 jQuery 文本输入框自动完成自动提示插件
文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作,是非常好的产品使用体验.这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件,帮助你在网站中轻松添加输入框 ...
基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js
1.插进使用场景请打开https://baike.baidu.com/item/日本动画#hotspotmining,查看百度百科页面效果. 2.插件源代码(更新 2017-08-28): jQue ...
css3旋转木马轮播图,超酷jQuery 3D旋转木马效果轮播图插件
jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件.该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等.jCarrousel代码简洁,使用简单,值得推荐. 由 ...
html旋转木马切换效果,超酷jQuery 3D旋转木马效果轮播图插件 -HTML5功能
简要教程 jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件.该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等.jCarrousel代码简洁,使用简单,值得 ...
3种风吹图片jquery堆叠图片切换效果插件
dreamweaver免费视频教程: http://www.51rgb.com/mproductzh.aspx?classid=31 加讨论群390180913 入群即可参加周一至周五免费公开课并获得 ...
使用 Sticky-Kit 实现基于 jQuery 的元素固定效果
元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

jQuery 插件输入框focus效果编写自己的插件

jQuery 插件输入框focus效果编写自己的插件相关推荐

最新文章

热门文章

jQuery 插件 输入框focus效果 编写自己的插件

jQuery 插件 输入框focus效果 编写自己的插件相关推荐

最新文章

热门文章

jQuery 插件输入框focus效果编写自己的插件

jQuery 插件输入框focus效果编写自己的插件相关推荐