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克隆对象、数组的常用方法介绍
Sep 26 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
JS函数本身的作用域实例分析
Mar 16 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模板解析类实例
2015/07/09 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
PHP的全局错误处理详解
2016/04/25 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
IE 下的只读 innerHTML
2009/08/21 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
清除输入框内的空格
2016/12/21 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
对python 命令的-u参数详解
2018/12/03 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
自荐信格式范文
2013/10/07 职场文书
车间工艺员岗位职责
2013/12/09 职场文书
表彰先进集体通报
2014/01/12 职场文书
数控个人求职信范文
2014/02/03 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技