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 相关文章推荐
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
vue+Element-ui前端实现分页效果
Nov 15 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 时区的一点总结
2008/03/26 PHP
php判断访问IP的方法
2015/06/19 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
JavaScript版代码高亮
2006/06/26 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
学习jQuey中的return false
2015/12/18 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Python插件机制实现详解
2020/05/04 Python
Python实现一个优先级队列的方法
2020/07/31 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
视光学专业毕业生推荐信
2013/10/28 职场文书
展会邀请函范文
2014/01/26 职场文书
团队经理竞聘书
2014/03/31 职场文书
初一学生期末评语
2014/04/24 职场文书
公司租房协议书
2014/10/14 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
用python实现监控视频人数统计
2021/05/21 Python
详解Python内置模块Collections
2022/03/22 Python