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
热门推荐
- 谷歌浏览器调试工具中sources面板
- dockerfile挂载目录(解决docker run中使用 ./ 相对路径挂载文件或目录失败的问题)
- ftp服务器包括哪些(FTP服务器和Web服务器知多少)
- pythontkinter详解(python3.6使用tkinter实现弹跳小球游戏)
- dedecms主表内容(DEDECMS最为常用的分页标签及分页样式代码)
- 织梦后台参数怎么设置才符合seo(详解织梦模板自定义表单限制IP24小时只能提交一次教程)
- 浏览器怎么显示javascript页面(JavaScript如何通过userAgent判断几个常用浏览器详解)
- iiS7中如何部署MVC3程序
- apache虚拟目录配置(Apache 添加虚拟目录注意事项)
- axios自动重复提交请求(Axios取消重复请求的方法实例详解)