jquery插件小试牛刀:文本框为空时默认文字显示,获得焦点后默认文字消失
2012-08-21 15:30
519 查看
最近粗略学习了一下jQuery插件制作的基本原理和方法,再次感受到jQuery的方便和强大之处。本着“现学现用”的精神,马上动手做了个非常简单的文本框插件,就当练手了。目标效果很简单:一个文本框,当没有内容且失去焦点时显示默认文字(可以加点样式以突出显示跟正常输入文字的区别),获得焦点时去掉默认文字。相信大家经常看到这种效果,尤其在搜索框中比较常用。废话不多讲,直接贴代码。
稍微解释下代码。代码最外层是写jQuery插件的惯用伎俩:匿名函数。
定义好后立即传入jQuery对象调用它。写插件的基本原理是扩展jQuery对象。$.fn.extendName=function(args){...},extendName即为插件的名字。另外值得一提的是$.extend函数,它有多个重载版本,这里用的就是将第一个参数之后的对象合并到第一个参数并返回合并后的值。为什么要合并呢?这样方便使用时传入自定义参数,没有参数时使用默认的。return this.each(function(){...})最为关键了,它返回jQuery选择器选中的对象,里面的函数就是对选中的对象进行各种操作。以上就是对jQuery插件的基本写法的介绍。至于插件本身,就很简单了。就是文本框的focus和blur事件处理,具体看看代码就清楚了。
调用方法:$("#txtName").smartFocus({ defaultText: '请输入姓名' });
效果如下图所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/14/923c75de24f5f5584fdd963990357735.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/14/c1a577c5d106a4d27e96c698f19d7d99.png)
初次写jQuery插件,只是实现了最基本的功能。就当写个备忘录,也希望对初学者有点帮助。
注:来自于
大道至简
(function ($) { $.fn.smartFocus = function (options) { var defaults = { defaultText: '请输入文字' }; var opt = $.extend(defaults, options); return this.each(function () { $(this).focus(function () { var text = $(this).val(); if (text == opt.defaultText) { $(this).val(''); } }).blur(function () { var text = $(this).val(); if (text == '') { $(this).val(opt.defaultText).css("font-style", "italic"); } else { $(this).css("font-style", "normal"); } }); if ($(this).val() == '') { $(this).val(opt.defaultText).css("font-style", "italic"); ; } else { $(this).css("font-style", "normal"); } }); }; })(jQuery);
稍微解释下代码。代码最外层是写jQuery插件的惯用伎俩:匿名函数。
(function($){ })(jQuery)
定义好后立即传入jQuery对象调用它。写插件的基本原理是扩展jQuery对象。$.fn.extendName=function(args){...},extendName即为插件的名字。另外值得一提的是$.extend函数,它有多个重载版本,这里用的就是将第一个参数之后的对象合并到第一个参数并返回合并后的值。为什么要合并呢?这样方便使用时传入自定义参数,没有参数时使用默认的。return this.each(function(){...})最为关键了,它返回jQuery选择器选中的对象,里面的函数就是对选中的对象进行各种操作。以上就是对jQuery插件的基本写法的介绍。至于插件本身,就很简单了。就是文本框的focus和blur事件处理,具体看看代码就清楚了。
调用方法:$("#txtName").smartFocus({ defaultText: '请输入姓名' });
效果如下图所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/14/923c75de24f5f5584fdd963990357735.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/14/c1a577c5d106a4d27e96c698f19d7d99.png)
初次写jQuery插件,只是实现了最基本的功能。就当写个备忘录,也希望对初学者有点帮助。
注:来自于
大道至简
相关文章推荐
- jQuery表单Input文本框默认说明文字获得焦点后消失效果
- jQuery表单input文本框默认说明文字获得焦点后消失效果
- jQuery表单Input文本框默认说明文字获得焦点后消失效果
- jQuery表单Input文本框默认说明文字获得焦点后消失效果
- jquery 获得焦点的时候,焦点时文本框清空,失去焦点时又显示默认文字
- 文本框中有默认的文字,写获取焦点和失去焦点的文字显示与消失的效果
- 文本框内默认提示————请输入用户姓名(字体灰色),要求: (1)当文本框获得焦点时,默认提示消失 (2)当文本框失去焦点时,如果没有输入新内容,那么则显示原来的灰色字体内容; 如果有新内容输入则判断,如果长度小于10,则提示“姓名长度应该大于10个字符”
- jQuery, 文本框获得焦点后, placeholder提示文字消失
- JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
- JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
- JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
- 使用jQuery制作高级炫酷吊炸天表单,页面加载完成文本框获得焦点,文本框设置默认文本,文本字数动态显示.....
- input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
- 文本框特效:获取焦点时自动清除默认文本 失去焦点重新显示默认文字
- 通过js实现得到焦点时文本框清空,失去焦点时又显示默认文字,值发生改变时不再恢复默认文字?
- 在文本框中有一行灰色文字,获得焦点并输入时自动消失
- jQuery实现文本域内提示文字,当鼠标点击进文本域后自动消失,文本域失去鼠标焦点后显示提示文字或显示用户输入的文字。
- 第一段jquery代码,文本框中使用文字站位,获取焦点后文字消失;移出后文字重新出现。
- 关于输入框得到焦点时文本框清空,失去焦点时又显示默认文字,值发生改变时不再恢复默认文字的两种方法
- jquery文本框默认文字点击消失的效果