html部分:

<textarea id="textarea">哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽</textarea>

js部分:

<!--textarea高度跟随文字高度而变化-->
 <script>
  function makeExpandingArea(el) {
   var setStyle = function(el) {
       el.style.height = 'auto';
       el.style.height = el.scrollHeight + 'px';
       // console.log(el.scrollHeight);
   }
   var delayedResize = function(el) {
       window.setTimeout(function() {
           setStyle(el)
       },
       0);
   }
   if (el.addEventListener) {
       el.addEventListener('input',function() {
           setStyle(el)
       },false);
       setStyle(el)
   } else if (el.attachEvent) {
       el.attachEvent('onpropertychange',function() {
           setStyle(el)
       });
       setStyle(el)
   }
   if (window.VBArray && window.addEventListener) { //IE9
       el.attachEvent("onkeydown",function() {
           var key = window.event.keyCode;
           if (key == 8 || key == 46) delayedResize(el);

});
       el.attachEvent("oncut",function() {
           delayedResize(el);
       }); //处理粘贴
   }
}
makeExpandingArea(textarea);
</script>

textarea高度跟随文字高度而变化的更多相关文章

  1. 小程序实现textarea随输入的文字行数变化高度自动增加

    参考链接:https://blog.csdn.net/liuwengai/article/details/78987957 该实现方法是根据上面的链接改编为小程序的实现,代码如下: wxml: < ...

  2. textarea文本域的高度随内容的变化而变化

    用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码 代码如下: .t_area{ width:300px; overflow-y:visible } & ...

  3. iOS UITextView 高度随文字自己主动添加,并尾随键盘移动(二)

    上节地址:http://blog.csdn.net/lwjok2007/article/details/47401293 接着上节我们来实现 输入框自己主动调节高度 首先,我们得知道,要推断是否该换行 ...

  4. iOS中动态计算不同颜色、字体的文字高度

    在改项目bug的时候,有一个问题动态计算label的高度,前开发者竟然用字符串长度除以14.16这样的常量来计算是否换行,结果cell的高度问题非常严重. 因为label内容里有部分关键字是要另一种颜 ...

  5. javascript实现限定高度下文字随不同设备自适应改变字体大小至字数完全展示

    function fontAutoMoreLine() { let textBox = document.getElementById("iconTxt"); let maxHei ...

  6. 使用contenteditable+div模拟textarea文本域实现高度自适应

    使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...

  7. textarea 的最大高度以及最小高度

    <script type="text/javascript"> $(function(){ $("#textarea3").textareaAuto ...

  8. iOS 【终极方案】精准获取webView内容高度,自适应高度

    前言:是这样的,刚写完上一篇文章还没缓过神来,上一篇文章我还提到了,想和大家聊聊原生+H5如何无缝连接的故事.结果我朋友就给我发了两篇他的作品.他的做法也都有独到之处.好的文章都是这样,让你每次看都能 ...

  9. fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题

    最近接触了好几次jquery.fullpage.js这个插件,实现整屏的滑动,效果很炫,用fullpage来实现也很简单,但是也碰到了一些问题和大家分享一下 1.单屏高度超过屏幕高度,实现单屏的滑动 ...

随机推荐

  1. 剑指offer四十一之和为S的连续正数序列

    一.题目   题目描述:小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数 ...

  2. 【DB2】SQL0437W Performance for this complex query may be sub-optimal

    参考链接 Technote (troubleshooting) Problem(Abstract) Error [IBM][CLI Driver][DB2/6000] SQL0437W Perform ...

  3. (转)更换镜像rootvg卷组中的硬盘

    F85系统镜像盘更换实录之一:删除原有镜像操作 # cfgmgr # lsdev -Cc disk hdisk0 Available 11-09-00-8,0  16 Bit LVD SCSI Dis ...

  4. 再学Java 之 Integer 包装类缓存

    前言:本博文将涉及的Java的自动装箱和自动拆箱,可以参考 这篇文章 和 官方教程 ,这里不再赘述. 首先,先看一个小程序: public class Main { public static voi ...

  5. Linux的shell script

    Linux的shell script //编辑shell: vi a.sh //子进程运行shell sh a.sh //主线程运行shell source a.sh 相关例子: #!/bin/bas ...

  6. Scala的下载和安装(本地)

    前言 Scala版本的选法: 目前,Kafka库和JDBC并不支持Scala2.11的编译,以及结合大多数人的使用请来看.         scala2.10.*为主,在这,scala2.10.4版本 ...

  7. 12-mapReduce的简介和yarn搭建

    Hadoop的核心组件之er: mapreduce 目前的计算框架 mapreduce spark storm flink(阿里) mapreduce的核心理念: 移动计算, 而不是移动数据(redu ...

  8. Java代码实现单例模式

    public class Single { /*private static final Single single=new Single(); private Single(){} public s ...

  9. 【angular5项目积累总结】文件下载

    download() { const token = localStorage.getItem('token'); let headers: HttpHeaders = new HttpHeaders ...

  10. val();html();.text()区别

    对于innerHTML 属性,几乎所有的元素都有innerHTML属性,它是一个字符串,用来设置或获取位于对象起始和结束标签内的HTML.(获取HTML当前标签的起始和结束里面的内容) 对于inner ...