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

首先还是看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能力也就提升了。
demo下载地址：jQuery.plugin.autogrow

赞 (0)

相关推荐

  • 基于jquery插件制作左右按钮与标题文字图片切换效果

    本例用了2个js文件jquery-ui-1.8.6.core.widget.js和jqueryui.bannerize.js,到演示页面可以查看 CSS Code 复制代码 代码如下: <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} /* ui-banner */ .ui-banner{display:block;position:relative;wi

  • jquery插件制作 表单验证实现代码

    先下页面代码: 复制代码 代码如下: <!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>&l

  • 强烈推荐240多个jQuery插件提供下载

    强烈推荐240多个jQuery插件提供下载

    jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents.events.实现动画效果,并且方便地为网站提供 AJAX 交互. jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择. jQuery 能够使用户的 html 页保持代码和 html 内容分离,也就是说,不用再在 html 里面插入一堆js来调用命令了,只需定义 id 即可.今天在Kollermedia.at上发现了一篇J

  • jquery插件制作 提示框插件实现代码

    我们首先来介绍自定义选择器的开发,他的代码结构如下: 复制代码 代码如下: (function ($) { $.expr[':'].customselector = function (object,index,properties,list) { //code }; })(jQuery); 调用时候的写法: $(a:customselector) 现在我们先解释下函数中所使用到的各个参数. object:当前dom元素的引用,而不是jquery对象.需要强调的一点,dom元素和jquery对象

  • jquery插件制作 手风琴Panel效果实现

    首先我们还是创建一个html文件,里面包含如下的html结构. 复制代码 代码如下: <div id="pane-container"> <div class="pane"> <h1>first pane</h1> <p>this script should allow only one pane to be visible at a time.</p> </div> <div

  • jQuery焦点图切换简易插件制作过程全纪录

    jQuery焦点图切换简易插件制作过程全纪录

    首页经常是需要一个焦点图切换的效果,最近做的项目也正好需要,所以在网上搜索,后面查到了一个半成品的插件,这里我自己修改了一下. js文件夹下面有两个文件夹jquery.jslide.js与jquery.jslides.js,前面一个是我改写的,第二个是原作者的文件.下图是效果图: 一.静态效果 <div class="slide_wrap"> <ul id="slides2" class="slide"> <li s

  • 分享20多个很棒的jQuery 文件上传插件或教程

    分享20多个很棒的jQuery 文件上传插件或教程

    1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度.图像自动缩略和上传分块.可同时上传多个文件. 2. The KillersAjax Upload 该插件使用 XHR 用于上传多个文件,支持上传进度显示,但不支持 IE 3. SWFUpload jQuery Plugin 4. AjaxFileUpload 5. Uploadify Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 支持单文件或多文件上

  • jquery插件制作 图片走廊 gallery

    首先创建jquery.gallery.js的插件文件,构建程序骨架. 复制代码 代码如下: (function ($) { $.fn.gallery = function () { return this.each(function () { var self = $(this); self.click(function () { }); }); } })(jQuery); 创建html文件,使用我们创建的插件. 复制代码 代码如下: <!DOCTYPE html> <html xmln

  • 跟我一起学写jQuery插件开发方法（附完整实例及下载）

    很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效果发愁的时候,你潇洒的过去,然后对她说:"嗨,美女,用这个吧.这是我写的一个jQuery插件."我想基本上你的人生大事就能很快解决. 先想好做个什么功能 这是第一步,也是很重要的一步,鉴于咱们都是刚学习写jQuery插件,所以,这个功能一定要简单一些.不要想一口就吃个胖子,咱也吃不了.咱还

  • 一个简单的jQuery插件制作 学习过程及实例

    一,首先,制作jQuery插件需要一个闭包 复制代码 代码如下: (function ($) { //code in here })(jQuery); 这是来自jQuery官方的插件开发规范要求,使用这种编写方式有什么好处呢? a) 避免全局依赖. b) 避免第三方破坏. c) 兼容jQuery操作符'$'和'jQuery ' 二,有了闭包,在其中加入插件的骨架 复制代码 代码如下: $.fn.dBox = function (options) { var defaults = { //各种属性

  • jquery插件格式实例分析

    本文实例讲述了jquery插件格式.分享给大家供大家参考,具体如下: 现在打算给公司写一个公共组件,常用的工具很多都是jquery,很多时候一些插件特效也是基于jquery写的,因此工作中难免会遇到要拓展别人写的插件. 下面我简单的描述一下插件的格式: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit

  • 一步一步制作jquery插件Tabs实现过程

    tabs是现在网页应用最广的一种效果,jquery插件和非jquery插件也有不少,有一些朋友问我怎么用jquery.ui.tabs的ajax怎么只请求服务器一次原来我想其实很简单,看看官方的API就了解,不过我在回复这些朋友之前,用firebug查看了官方的ui.tabs发现,声明了ajax缓存,每点一个tabs时,仍然会有服务器请求这应该是服务器缓存,而不是实际上我们要求的只ajax一次,不再请求服务器了接下来我找了一下其它的tabs插件,基本上没有符合要求的,不是太庞大就是太简单,太过庞大

  • jquery tab插件制作实现代码

    jquery插件的基本格式: 复制代码 代码如下: (function($){ $.fn.tab = function(options){//$.fn后面的tab是这个插件的函数名称.可以更具自己喜好进行修改 var defaults = { //相关属性设置 } var options = $.extend(defaults, options); this.each(function(){ //实现的功能设置 }); }; })(jQuery); 我这里是做一个tab的插件,我来完善以上代码

随机推荐