基于jquery的让textarea自适应高度的插件


Posted in Javascript onAugust 03, 2010

Introduction
1. This textarea is like the google calendar's description when you create one new or update one existence calendar;
2. Its height will be changed accroding to user's input;
3. Its scrollbar is removed, which makes it much user friendly. I guess you may like it.

Using the code

1. import the jquery.js and textarea.js
<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/textarea.js"></script>

2. add the following css
<style type="text/css">
.autoHeight{border:1px solid #666666; width:300px; height:60px; line-height:20px; font:11px verdana; overflow:hidden;}
</style>

3. add one textare html control
<textarea class="autoHeight" id="textarea1"></textarea>

4. make it works
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$(".autoHeight").TextAreaAutoHeight();
});
</script>

Javascript 相关文章推荐
js兼容标准的表格变色效果
Jun 28 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
Js的Array数组对象详解
Feb 22 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 #Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 #Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 #Javascript
JavaScript和ActionScript的交互实现代码
Aug 01 #Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 #Javascript
jquery下onpropertychange事件的绑定方法
Aug 01 #Javascript
关于this和self的使用说明
Aug 01 #Javascript
You might like
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
原生JS实现留言板
2020/03/26 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
Python3基础之条件与循环控制实例解析
2014/08/13 Python
Python探索之pLSA实现代码
2017/10/25 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
linux下进程间通信的方式
2014/12/23 面试题
六一儿童节标语
2014/10/08 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
九年级英语教学反思
2016/02/15 职场文书
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python