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 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 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/07/14 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
php实现网站留言板功能
2015/11/04 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
总结Python编程中三条常用的技巧
2015/05/11 Python
Python制作简单的网页爬虫
2015/11/22 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
对python中各个response的使用说明
2020/03/28 Python
PyTorch中的C++扩展实现
2020/04/02 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
python实现mean-shift聚类算法
2020/06/10 Python
廉政教育心得体会
2014/01/01 职场文书
活动志愿者自荐信
2014/01/27 职场文书
初中家长寄语
2014/04/02 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书