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下利用fso判断文件是否存在的代码
Dec 11 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
详解javascript脚本何时会被执行
Feb 05 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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学习 字符串课件
2008/06/15 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
容易被忽略的JS脚本特性
2011/09/13 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
python字符串Intern机制详解
2019/07/01 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
中国宠物用品商城:E宠商城
2016/08/27 全球购物
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
介绍一下EJB的体系结构
2012/08/01 面试题
物流专业毕业生推荐信范文
2013/11/18 职场文书
秘书行业自我鉴定范文
2013/12/30 职场文书
运动会通讯稿400字
2014/01/28 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
委托书的写法
2014/08/30 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书