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 相关文章推荐
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
Feb 23 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 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+oracle 分页类
2006/10/09 PHP
php中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
Python中设置变量访问权限的方法
2015/04/27 Python
总结Python编程中三条常用的技巧
2015/05/11 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
Python元组知识点总结
2019/02/18 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
python调用支付宝支付接口流程
2019/08/15 Python
Python利用命名空间解析XML文档
2020/08/10 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
优质的学校老师推荐信
2013/10/28 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
低碳生活倡议书
2014/04/14 职场文书
社会工作专业自荐信
2014/09/26 职场文书
初中生活随笔
2015/08/15 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis