<!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: #FFFFFF;

    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>

Textarea自适应高度 JS实现，兼容IE6\7\8\9\10\11的更多相关文章

  1. div模拟textarea自适应高度

    之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...

  2. textarea自适应高度，div模仿textarea可编辑实现自适应高度，placeholder使用图标

    1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...

  3. js实现textarea自适应高度

    html结构: <div class="container" id="container"> <div class="text-wr ...

  4. textarea自适应高度

    最近做项目遇见了这个自适应高度的问题,也在网上找了些资料,大多选择用DIV模拟textarea,但是这样就有安全性的问题,因为你是可以直接将HTML代码输入进去的. 接下来介绍的这种办法是采用两个te ...

  5. 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)

    项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...

  6. 简单实现一个textarea自适应高度

    textarea自适应的实现方法很多,原理其实比较简单:监听textarea的input或者键盘事件,获取元素的scrollHeight,重置textarea元素的高度. 预览地址:textarea ...

  7. 【前端开发】前端引入公共部分footer header的几种方法，及iframe自适应高度js

    一.引入页面几种方法   1.IFrame引入,看看下面的代码    <iframe   frameborder=0   border=0   width=300   height=300    ...

  8. jquery文本框textarea自适应高度

    浏览器中默认的文本框是不能根据内容的增多变高,只能固定高度有滚动条,体验不是很好,找了很多方法兼容都不行,总算找到个兼容良好的方法: <body> <textarea id=&quo ...

  9. textarea 自适应高度

    试了好多方法,包括百度了好多.一旦接口获取的内容,就不好用了.有时候就是脑袋转不过来,想了好久的方法居然那么简单,然后,脑洞大开,忽然想到还可以这样弄, 很简单,两句话 var textareaHei ...

随机推荐

  1. asp.net mvc4设置area里面使用相同的 Controller 名称并设置area里的页面为起始页

    asp.net mvc4设置area里面使用相同的 Controller 名称并设置area里的页面为起始页 1.使用重名controller 在asp.net mvc2以后的版本里面,有了area( ...

  2. boost xpressive 例子

    1.效果图: 我有一个wordpress博客,每次在csdn上写完博客,都需要复制到wordpress中,还需要手动修改<pre>和图片地址,比较麻烦,所以做了这个工具. 功能: 1.把C ...

  3. 【2013Esri全球用户大会精彩看点】Jack为您全面解读“GIS-Transforming Our World”

    GIS正影响着最尖端的科学与技术,正改变着我们的世界. 1.     GIS的带来的改变不只是物质世界的,还有观念方面. 当今世界面临各种挑战,我们要创造更美好的未来,需要智能的GIS.GIS改变了我 ...

  4. 【转】简单十步让你全面理解SQL

    简单十步让你全面理解SQL 很多程序员认为SQL是一头难以驯服的野兽.它是为数不多的声明性语言之一,也因为这样,其展示了完全不同于其他的表现形式.命令式语言. 面向对象语言甚至函数式编程语言(虽然有些 ...

  5. gRPC helloworld service, RESTful JSON API gateway and swagger UI

    概述 本篇博文完整讲述了如果通过 protocol buffers 定义并启动一个 gRPC 服务,然后在 gRPC 服务上提供一个 RESTful JSON API 的反向代理 gateway,最后 ...

  6. 使用highcharts显示mongodb中的数据

    1.mongodb数据表相关 # 显示数据库 show dbs # 数据库 use ceshi # 显示表 show tables # 创建集合 db.createCollection('infoB' ...

  7. 批处理+组策略 实现规定时间段无法开机and定时关机

    某爱熬夜的人对付自己的东西 1.shutdown命令 shutdown -a #取消现有的shutdown计划 shutdown -s -t [time] #设定时间关机 shutdown -r -t ...

  8. JS 用角度换东南西北

    最近因为业务,正好需要用设备回传的角度值转成用户读得懂的文字形式 function toDirStr(num){ var num=parseInt(num) var N='北'; var E='东'; ...

  9. 关于jquery 1.9以上多次点击checkbox无法选择的

    在jquery1.9之前,我们对于一个checkbox对象来进行重复选择或者取消, 我们可以使用这个方法$().attr('checked',checked);//选中 $().removeAttr( ...

  10. expressJS - 准备活动

    安装 nodeJS 1. package.json 2. CommonJS, AMD, ES6 3. Babel