textarea 高度自适应
类别:Web前端 浏览量:779
时间:2014-6-1 textarea 高度自适应
textarea 高度自适应直接上代码 (需要引用 jquery 文件)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.chackTextarea-area{line-height: 20px; font-size: 14px;padding: 0;border: 1px solid #CDCDCD; width: 400px;}
</style>
<script type="text/javascript" src="Jquery。js"></script>
<script type="text/javascript">
(function($){
$.fn.autoTextarea = function(options) {
var defaults={
maxHeight:null,
minHeight:$(this).height()
};
var opts = $.extend({},defaults,options);
$(this).bind("paste cut keydown keyup focus blur",function(){
var height,style=this.style;
this.style.height = opts.minHeight + 'px';
if (this.scrollHeight > opts.minHeight) {
if (opts.maxHeight && this.scrollHeight > opts.maxHeight) {
height = opts.maxHeight;
style.overflowY = 'scroll';
} else {
height = this.scrollHeight;
style.overflowY = 'hidden';
}
style.height = height + 'px';
}
});
};
})(jQuery);
</script>
</head>
<body>
<li>
<textarea name="textarea" id="textarea" cols="60" rows="1" class="chackTextarea-area"></textarea>
</li>
<script type="text/javascript">
$(".chackTextarea-area").autoTextarea({maxHeight:220});
</script>
</body>
</html>
标签:textarea
您可能感兴趣
- html自适应怎么没有滚动条(如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度)
- html5浏览界面怎么设置(HTML5textarea高度自适应的两种方案)
- textarea设置行距(做一个能自适应高度的textarea的示例代码)
- 如何处理textarea换行
- textarea换行属性(处理textarea中的换行和空格)
- textarea 高度自适应
- 不走心的古装造型 舒畅 毁容式 出演,萧蔷雷出新高度(不走心的古装造型)
- 嘉南传 第22集(嘉南传第22集)
- 哪版孙悟空最萌 黄渤躺萌了(哪版孙悟空最萌)
- 融入小人物的喜怒哀乐,黄渤饰演的角色为什么让人观看时欲罢不能(融入小人物的喜怒哀乐)
- 《极限挑战》深访都市夜归人,夜间打工者体验,黄磊录完憔悴了(极限挑战深访都市夜归人)
- Google 推出了一个游戏生成器,让不会编程的你也能自己设计游戏(推出了一个游戏生成器)
热门推荐
- mysql的7种索引(浅入浅出 MySQL 索引)
- 云主机功能描述(云主机有哪些使用优势?)
- tensorflow自定义初始化(Tensorflow分类器项目自定义数据读入的实现)
- vue实现添加购物车小球(Vue实现简易购物车案例)
- mysql的binlog日志详解(MySQL 有关MHA搭建与切换的几个错误log汇总)
- php 策略模式工厂模式区别(PHP设计模式之策略模式原理与用法实例分析)
- api接口安全方面的几个建议
- css中background image重复平铺(解决CSS 中box-sizing与background-clip解决背景显示范围的问题)
- 小程序推荐ui库(AmazeUI 列表的实现示例)
- iframe跨域原理(详解使用postMessage解决iframe跨域通信问题)