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和DOM Interfaces来处理HTML
Oct 09 Javascript
js 格式化时间日期函数小结
Mar 20 Javascript
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 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/02/24 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
js 操作符实例代码
2009/10/24 Javascript
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
Python多线程爬虫简单示例
2016/03/04 Python
python中常用的九种预处理方法分享
2016/09/11 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
解决Python一行输出不显示的问题
2018/12/03 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
企业公益活动策划方案
2014/08/24 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
2014年班干部工作总结
2014/11/25 职场文书
故意伤害辩护词
2015/05/21 职场文书