Textarea根据内容自适应高度


Posted in Javascript onOctober 28, 2013

直接看代码吧,很简单,也很实用。

<!DOCTYPE html>
<html>
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
    border: 0 none white;
    overflow: hidden;
    padding: 0;
    outline: none;
    background-color: #D0D0D0;
    resize: none;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent('on'+event, handler);
    };
}
else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}
function init () {
    var text = document.getElementById('text');
    function resize () {
        text.style.height = 'auto';
        text.style.height = text.scrollHeight+'px';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize () {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);
    text.focus();
    text.select();
    resize();
}
</script>
</head>
<body onload="init();">
<textarea cols="40" rows="1" style="height:25px;" id="text"></textarea>
</body>
</html>

 

Javascript 相关文章推荐
js表格分页实现代码
Sep 18 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 Javascript
图解JS原型和原型链实现原理
Sep 15 Javascript
将json当数据库一样操作的javascript lib
Oct 28 #Javascript
一个JavaScript变量声明的知识点
Oct 28 #Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 #Javascript
javascript中简单的进制转换代码实例
Oct 26 #Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 #Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 #Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 #Javascript
You might like
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
破解Session cookie的方法
2006/07/28 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
js数组操作学习总结
2013/11/04 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
python使用cookie库操保存cookie详解
2014/03/03 Python
以windows service方式运行Python程序的方法
2015/06/03 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
python三大神器之fabric使用教程
2019/06/10 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
如何在存储过程中使用Loop
2016/01/05 面试题
相亲活动方案
2014/08/26 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
python opencv通过按键采集图片源码
2021/05/20 Python