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 相关文章推荐
js变换显示图片的实例
Apr 16 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
Javascript闭包实例详解
Nov 29 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
JS实现水平移动与垂直移动动画
Dec 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 iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
js同时按下两个方向键
2007/12/01 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
Python中几种导入模块的方式总结
2017/04/27 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
房产代理公证处委托书
2014/04/04 职场文书
经典演讲稿汇总
2014/05/19 职场文书
关爱留守儿童标语
2014/06/18 职场文书
民间借贷协议书范本
2014/10/01 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
三好学生竞选稿
2015/11/21 职场文书
外出培训学习心得体会
2016/01/18 职场文书
nginx优化的六点方法
2021/03/31 Servers
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS