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实现仿银行密码输入框效果的代码
Dec 13 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
JavaScript判断对象和数组的两种方法
May 31 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留言本实例代码
2010/05/09 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
javascript Base类 包含基本的方法
2009/07/22 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
Python中优化NumPy包使用性能的教程
2015/04/23 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
Python3中的bytes和str类型详解
2019/05/02 Python
Python面向对象之Web静态服务器
2019/09/03 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
委托代理人授权委托书范本
2014/09/24 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
环保证明
2015/06/23 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
Redis实现一个账号只能登录一个设备
2022/04/19 Redis
Mysql开启外网访问
2022/05/15 MySQL