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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
javascript xml为数据源的下拉框控件
Jul 07 Javascript
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
React服务端渲染原理解析与实践
Mar 04 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中一个完整表单处理实现代码
2011/11/10 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
php数组键名技巧小结
2015/02/17 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
js 上传图片预览问题
2010/12/06 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
Atom的python插件和常用插件说明
2018/07/08 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
python3实现字符串操作的实例代码
2019/04/16 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
团支部建设方案
2014/05/02 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技
Nginx配置之禁止指定IP访问
2022/05/02 Servers