jquery插件制作 自增长输入框实现代码


Posted in jQuery onAugust 17, 2012

首先还是看html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script type="text/javascript" src="Scripts/jquery-1.8.0.min.js"></script> 
<script type="text/javascript" src="Scripts/jquery.autogrow.js"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
$('#autogrow').autogrow(); 
}); 
</script> 
</head> 
<body> 
<form action="#" method="post"> 
<fieldset> 
<legend>auto growing textarea</legend> 
<textarea id="autogrow" cols="20" rows="4">this textarea will grow indefinitely.</textarea> 
</fieldset> 
</form> 
</body> 
</html>

接下来是js插件代码:

(function ($) { 
$.fn.autogrow = function (options) { 
var defaults = { 
minHeight: 0, 
maxHeight: 9999 
}; 
var options = $.extend(defaults, options); 
return this.each(function () { 
var element = $(this); 
//上一次文本框内容长度和宽度 
var lastValLength, lastWidth; 
//文本框内容长度、宽度和高度 
var valLength, width, height; 
//验证页面元素是textarea 
if (!element.is('textarea')) { 
return; 
} 
element.css('overflow', 'hidden')//设置超出范围的文字隐藏 
.keyup(function () {//设置键盘弹起事件 
//获取文本框内容长度 
valLength = $(this).val().length; 
//获取输入框的宽度 
//我这里使用的jquery版本是1.8,获取css属性的方法已经变成了prop 
//如果使用1.6以下版本的jquery,以下代码要变为 width = $(this).attr('offsetWidth'); 
//$(this).prop('scrollHeight')也要变为:$(this).attr('scrollHeight') 
width = $(this).prop('offsetWidth'); 
//有文字删除操作,或者文本框宽度变化的时候,先将文本框高度设置为0 
if (valLength < lastValLength || width != lastWidth) { 
$(this).height(0); 
} 
//计算适合的文本框高度 
height = Math.max(options.minHeight, Math.min($(this).prop('scrollHeight'), options.maxHeight)); 
//如果当前文本框的高度超过我们允许的最大高度的时候,隐藏多余文字;否则设置为auto 
//$(this).prop('scrollHeight') > height 只有在height取得的值是options.maxHeight才有意义 
$(this).css('overflow', ($(this).prop('scrollHeight') > height ? 'auto' : 'hidden')) 
.height(height); //设置文本框高度 
lastValLength = valLength; 
lastWidth = width; 
}); 
}); 
} 
})(jQuery);

例子比较简单,就是当你往文本框里输入信息的时候,文本框的高度会根据情况自动增长。

建议大家在看懂代码的基础上,还是自己动手写一遍代码,一来可以加深记忆,二来或许会遇到一些特殊情况,或许自己的demo运行不成功。通过努力,让自己的demo运行成功,你的js能力也就提升了。

jQuery 相关文章推荐
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
Jquery Fade用法详解
Nov 06 jQuery
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 #jQuery
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 #jQuery
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 #jQuery
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 #jQuery
jQuery轻松实现无缝轮播效果
Mar 22 #jQuery
You might like
用PHP实现图象锐化代码
2007/06/14 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
动态调用CSS文件的JS代码
2010/07/29 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
用Python开发app后端有优势吗
2020/06/29 Python
Python 存取npy格式数据实例
2020/07/01 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
非功能性需求都包括哪些方面
2013/10/29 面试题
医药销售求职信范文
2014/02/01 职场文书
总经理助理工作职责
2014/02/06 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
承诺函格式模板
2015/01/21 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
导游词之麻姑仙境
2019/11/18 职场文书