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采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 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的MySQL连接类
2013/06/07 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
python Cartopy的基础使用详解
2020/11/01 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
校园新闻广播稿
2014/01/10 职场文书
电台实习生求职信
2014/02/25 职场文书
班级团队活动方案
2014/08/14 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
政风行风评议工作总结
2014/10/21 职场文书
教师聘用意向书
2015/05/11 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
Golang 入门 之url 包
2022/05/04 Golang
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers