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调用Session的实现代码
Oct 29 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
ES6箭头函数和扩展实例分析
May 23 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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
分享PHP守护进程类
2015/12/30 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
python的Template使用指南
2014/09/11 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
使用Python实现画一个中国地图
2019/11/23 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
女方回门宴答谢词
2014/01/14 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
村创先争优活动总结
2014/08/28 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
求职导师推荐信范文
2015/03/27 职场文书
早会开场白台词大全
2015/06/01 职场文书