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代码
Dec 21 Javascript
jQuery的text()方法用法分析
Dec 20 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
Vue 实现登录界面验证码功能
Jan 03 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与MySQL交互使用详解
2006/10/09 PHP
php 购物车完整实现代码
2014/06/05 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
PHP中使用curl入门教程
2015/07/02 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
利用JS实现数字增长
2016/07/28 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
python中函数传参详解
2016/07/03 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python实现学生成绩管理系统
2020/04/05 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
python3判断url链接是否为404的方法
2018/08/10 Python
Python基于requests库爬取网站信息
2020/03/02 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
中层干部竞争上岗演讲稿
2014/01/13 职场文书
开学典礼演讲稿
2014/05/23 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
python接口测试返回数据为字典取值方式
2022/02/12 Python