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轻松实现无缝轮播效果
Mar 22 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
php 文件上传实例代码
2012/04/19 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
three.js 入门案例详解
2018/01/23 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
详解python while 函数及while和for的区别
2018/09/07 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
django跳转页面传参的实现
2020/09/17 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
编辑个人求职信范文
2013/09/21 职场文书
奶茶专卖店创业计划书
2014/01/18 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
物业工程部岗位职责
2015/02/11 职场文书
浅析Django接口版本控制
2021/06/26 Python
入门学习Go的基本语法
2021/07/07 Golang