基于jQuery的“autoresize”插件自动改变textarea大小资源-CSDN文库

共5个文件

js：3个

css：1个

html：1个

jQuery

autoresize

textarea

5星 · 超过95%的资源需积分: 21 116 浏览量 2012-07-26 14:57:23 上传评论收藏 23KB ZIP 举报

在网页开发中，文本框（textarea）经常用于用户输入大量文本。然而，传统的textarea元素在用户输入时，其大小不会自适应内容的变化，这可能导致用户体验不佳。为了解决这个问题，开发者通常会借助JavaScript库，如jQuery，来实现textarea的动态高度调整。本篇文章将详细介绍基于jQuery的"autoresize"插件，以及如何使用它来自动改变textarea的大小。 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。"autoresize"插件是jQuery的一个扩展，它能实时监控textarea中的文本变化，并根据内容自动调整textarea的高度，使得文本始终保持在最后一行，无需用户滚动查看。要使用"autoresize"插件，首先确保引入了jQuery库。在这个案例中，我们有一个名为"jquery.1.3.min.js"的文件，这是jQuery的一个早期版本。在HTML文档中，需要在`<head>`标签内通过`<script>`标签引入这个库，例如： ```html <script src="jquery.1.3.min.js"></script> ``` 接下来，引入"autoresize"插件。这里有两个版本可供选择："autoresize.js"和"autoresize.min.js"。min.js是经过压缩的版本，加载速度更快，但代码可读性较差。在实际项目中，一般选择min.js。同样地，通过`<script>`标签引入： ```html <script src="autoresize.min.js"></script> ``` 为了让textarea应用autoresize功能，我们需要在jQuery的`$(document).ready()`函数中调用插件。在"demo.html"中，可以找到textarea元素并为其应用插件，如下所示： ```html <script> $(document).ready(function() { $('textarea').autoresize(); }); </script> <textarea id="example"></textarea> ``` 在上面的代码中，`$('textarea')`选择了页面上所有的textarea元素，然后调用`.autoresize()`方法，为它们添加自动调整大小的功能。 "style.css"文件可能包含了一些基本样式，以使textarea在页面上看起来更美观。例如，可能设置了边框、填充、字体等属性。为了确保textarea的初始高度正确，可以添加以下CSS： ```css textarea { resize: none; /* 禁止用户手动调整大小 */ height: auto; /* 允许初始高度自动计算 */ } ``` 通过以上步骤，基于jQuery的"autoresize"插件便可以成功地应用于textarea，使textarea在用户输入时自动调整大小，提供更好的用户体验。需要注意的是，这个插件可能不适用于所有浏览器，特别是较旧的版本，因此在实际应用中应进行充分的兼容性测试。

资源推荐

资源详情

资源评论

收起资源包目录

基于jQuery的“autoresize”插件自动改变textarea大小.zip （5个子文件）

jquery.1.3.min.js 56KB

autoresize.min.js 1KB

autoresize.js 4KB

demo.html 2KB

style.css 993B

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jquery插件：使用“autoresize”插件自动改变textarea大小 - CSS9.NET</title> <link rel="stylesheet" href="style.css" /> <script type="text/javascript" src="jquery.1.3.min.js"></script> <script type="text/javascript" src="autoresize.min.js"></script> <script type="text/javascript"> $(function(){ $('textarea#comment').autoResize({ // On resize: onResize : function() { $(this).css({opacity:0.8}); }, // After resize: animateCallback : function() { $(this).css({opacity:1}); }, // Quite slow animation: animateDuration : 300, // More extra space: extraSpace : 30, limit: 150 }); }) </script> </head> <body> <div id="testdiv"> <h1>使用“autoresize”插件自动改变textarea大小 - CSS9.NET</h1> <h2>文章地址： <a href="http://css9.net/jquery-plugin-autoresize/">http://css9.net/jquery-plugin-autoresize/</a>   关注Web前端开发 - <a href="http://css9.net">CSS9.NET</a></h2> <p>文本框textarea是在网站中经常用到到多行文本输入标签，例如本文下面的留言输入框。一般情况下，我们会通过指定textarea的rows和cols属性来控制大小。当在textarea输入较多文本超过预设行数时，就会出现侧边滚动条。这样难免会将部分文本遮挡，当想回顾已输入内容时，还要去拖动滚动条，来来回回，煞是不爽。如果可以让textarea根据用户输入的文本内容自动扩展，就可以解决这个问题了，有助于改善用户体验。“autoresize”这款jquery插件就是用来解决这个问题的。<b>下面看效果:</b></p> <br /><br /> <textarea id="comment" style="width: 400px; padding: 5px; height: 50px; display: block; font-size:1.2em;">在这里输入内容，当内容超出文本框高度时，文本框会自动扩展</textarea> </body> </html>

评论收藏

内容反馈