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三个关闭弹出层的小示例
Nov 05 Javascript
理解javascript回调函数
Dec 28 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 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
用session做客户验证时的注意事项
2006/10/09 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
php创建图像具体步骤
2017/03/13 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
python如何爬取动态网站
2020/09/09 Python
大学生职业规划前言模板
2013/12/27 职场文书
竞职演讲稿范文
2014/01/11 职场文书
小学生家长寄语
2014/04/02 职场文书
献爱心活动总结
2014/05/07 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
档案管理员岗位职责
2015/02/12 职场文书
台风停课通知
2015/04/24 职场文书
关于教师节的广播稿
2015/08/19 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
导游词之湖北武当山
2019/09/23 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers