jQuery 自动增长的文本输入框实现代码


Posted in Javascript onApril 02, 2010

为了提高用户体验,我在午休时候想起了是不是可以用jQuery写个插件。想到不如做到,果然,我实现了这个功能。在写这个插件时我潜意识里想到这样的插件网上应该有人写过,不过我并没有去搜索,你有兴趣可以找一找。下面是插件的源代码。
源代码

;(function($) { 
$.fn.autoSizeText = function(settings) { 
var _defaultSettings = {min:20,max:40}; 
var _settings = $.extend(_defaultSettings, settings); 
var _handler = function() { 
jQuery(this).keyup(function() { 
if (jQuery(this).attr("type") != 'text') { 
return false; 
} 
jQuery(this).attr("size", _settings.min); 
var actLength = jQuery(this).val().length; 
if (actLength > _settings.min && actLength < _settings.max) { 
jQuery(this).attr("size", actLength + 1); 
} else if (actLength <= _settings.min) { 
jQuery(this).attr("size", _settings.min); 
} 
}); 
}; 
return this.each(_handler); 
}; 
})(jQuery);

调用方法:$(':text').autoSizeText();即可。
本插件有两个可选参数:max(设置文本框最大的size,超过此值不再size增长,默认值40)和min(设置文本框最小的size,同时也是文本框的初始size,默认值为20),在调用时可以修改。
例如:$(':text').autoSizeText({min:24,max:35});
$(':text').autoSizeText({max:35});//min没有设置,取默认值20
$(':text').autoSizeText({min:12});//max没有设置,取默认值40
你可以在此基础上继续扩展,例如可以支持textarea。
enjoy it!
Javascript 相关文章推荐
javascript 建设银行登陆键盘
Jun 10 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
总结js函数相关知识点
Feb 27 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
jquery select下拉框操作的一些说明
Apr 02 #Javascript
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 #Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 #Javascript
获取焦点时,利用js定时器设定时间执行动作
Apr 02 #Javascript
Javascript 类与静态类的实现(续)
Apr 02 #Javascript
用js实现计算加载页面所用的时间
Apr 02 #Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 #Javascript
You might like
php获取根域名方法汇总
2014/10/28 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
Node.js学习入门
2017/01/03 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
Python实现随机漫步功能
2018/07/09 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
详解Python流程控制语句
2020/10/28 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
英语翻译系毕业生求职信
2013/09/29 职场文书
会计实习自我鉴定
2013/12/04 职场文书
工程专业毕业生自荐信范文
2013/12/25 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
党员党性分析材料
2014/02/17 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
党员四风剖析材料
2014/08/27 职场文书
尊师重教演讲稿
2014/09/04 职场文书
财务会计岗位职责
2015/02/03 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
资产移交协议书
2016/03/24 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
Redis三种集群模式详解
2021/10/05 Redis