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中增加参数与Json转换代码
Nov 20 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
javascript入门教程基础篇
Nov 16 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
关于vue 项目中浏览器跨域的配置问题
Nov 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判断字符串在另一个字符串位置的方法
2014/02/27 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
python数据结构树和二叉树简介
2014/04/29 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
python绘制简单彩虹图
2018/11/19 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
毕业自我鉴定范文
2013/11/06 职场文书
机械设计职业生涯规划书
2013/12/27 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
教师先进个人材料
2014/12/17 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python