<!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. Composite C1是一个.Net平台上开源专业的CMS开源项目

    CompositeC1 4 发布 Composite C1是一个.Net平台上开源专业的CMS开源项目,很多的功能用户界面,面向任务的支持与各种工具协作.当编辑内容时在用户端体验很友好.编辑器与开发者 ...

  2. struts2中token的令牌机制

    通常在普通的操作当中,我们不需要处理重复提交的,而且有很多方法来防止重复提交.比如在登陆过程中,通过使用redirect,可以让用户登陆之上重定向到后台首页界面,当用户刷新界面时就不会触发重复提交了. ...

  3. win7 VS2008 ffmpeg release 版本崩溃 0x00905a4d 处未处理的异常

    这个坑, 我始终不相信编码的问题,但还是花了一上午加各种调试代码.一般加个断点,调试几下就知道是什么问题.在最后找不到解决办法的情况下google了一下,短短几分钟解决了这个问题. 程序都是踩着各种坑 ...

  4. [置顶] javascript-基于对象or面向对象？

    最近完成了javascript的初级学习,在这个学习的视频中,我特别注意了两个词,解释性语言和对象,javascript按照我的理解,应该是种解释性语言,他有关于面向对象的思想的体现,但是,他和vb一 ...

  5. 《Head First Python》学习笔记 01

    Python 3提供了70多个内建函数,这是Python“功能齐全”的观点:Python已经包含足够多的内置功能,使你能完成大多数工作,而不必依赖第三方代码. Python 列表: Python列表是 ...

  6. linux服务器开发二(系统编程)--线程相关

    线程概念 什么是线程 LWP:Light Weight Process,轻量级的进程,本质仍是进程(在Linux环境下). 进程:独立地址空间,拥有PCB. 线程:也有PCB,但没有独立的地址空间(共 ...

  7. Unity在安卓的一些路径

    APK安装之后找不到路径 公司的测试机(安卓)基本都是不带SD卡的. APK在安卓手机上安装之后,使用手机助手类的软件打开文件管理,打开 内置SDK卡/Android/data/ 在这个目录下却发现 ...

  8. 【CSS学习笔记】超链接标签

    有些网址后面为什么是#? 比如,href="http://www.xxx.com/index.html/#q2"标示网页index.html的q2位置处,浏览器读取这个URL后,会 ...

  9. 获取Storyboard中的视图控制器

    storyboard对于框架的构建是一个非常方便的工具,我们经常需要在storyboard中获取我们指定的视图控制器,那么要怎么获取呢? 方法如下: 第一步:选中视图,为视图自定义一个Storyboa ...

  10. CSS属性之absolute

    0.脱离标准文档流 绝对定位的元素会脱离标准文档流,拥有z-index属性,并且对于它的任何操作和改变都不会影响它的兄弟元素和父级元素,这里就不过多介绍. 不过值得注意的是,虽然绝对定位元素脱离的标准 ...