<!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. VS中为类,函数代码自动添加版权注释信息

    以web项目为例: 一:给类加注释 1.在visual studio 的安装路径下        如:[盘符]:\Program files\Microsoft Visual Studio 8\Com ...

  2. WPF4.5新特性(MSDN的翻译读不太懂)

    WPF4.5新特性(MSDN的翻译读不太懂) 1. 新的Doctype声明 XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明. <!DOCTYPE html PU ...

  3. Run SPLAHS2 under SE mode on gem5在gem5的SE模式下，运行SPLASH2程序

    1.  安装相关的gem5,可以参考以前的博客. 2.  下载splash2编译好的软件 首先从gem5的官网下载已经编译成alpha指令集的splash2.下载地址:http://www.gem5. ...

  4. javascript操作正则表达式对象的方法总结

    //正则表达式对象 /* var s = 'good good study day day up '; var r, re; re = new RegExp('study',"g" ...

  5. 解决Eclipse一直loading workbench无法启动的问题

    不知怎地,Eclipse始终停留在Loading workbench状态.反复重启,状态依旧.尝试解决. 停止时显示的状态:”Loading workbench”,看来和这个workbench插件有关 ...

  6. ASP.NET Zero--9.一个例子（2）商品分类管理-列表

    1.创建实体类 参考:http://www.cnblogs.com/farb/p/4923137.html 在Core(领域层)项目下新建一个目录Entities,在此目录下新建一个Category类 ...

  7. iOS之上架打包时报错：ERROR ITMS-90086: "Missing 64-bit support.

    根据错误信息在网上基本找到的解决方法是设置targets中build settings中的architectures中的内容 这是因为现在提交的app必须支持64位.  

  8. C++ unordered_map 在key为string类型和char*类型时测试时间性能差异

    测试系统liunx centos6.5 代码如下 #include <string.h> #include <sstream> #include <list> #i ...

  9. 百度的hao123.com篡改浏览器首页，解决办法

    快捷方式右键找到chrome.exe, 把chorme.exe修改成别的名字例如 chromeFuckHao123.exe 就OK了. hao123是用病毒的形式查找chrome.exe然后进程注入的 ...

  10. C# 动态对象（dynamic）的用法

    说到正确用法,那么首先应该指出一个错误用法: 常有人会拿var这个关键字来和dynamic做比较.实际上,var和dynamic完全是两个概念,根本不应该放在一起做比较.var实际上是编译期抛给我们的 ...