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. 虚拟网络编辑器的知识和出现的一些问题(没有VMnet0或VMnet8)

    不多说,直接上干货! 安装好的虚拟机,没有VMnet0!!! 解决的办法: 就可以了. 那么,问题现在又来了? 但是,每次都要这样,以右键,管理员身份运行,再关闭之后,以普通双击方式,即又没有VMne ...

  2. Tomcat中组件的生命周期管理公共接口Lifecycle

    Tomcat的组件都会实现一个Lifecycle接口,以方便组件的生命周期的统一管理 interface Lifecycle 组件生命周期中主要的几个方法 增加监听器,事件委托机制 public vo ...

  3. filebeat+ELK日志系统

    架构图 filebat logstash elasticsearch 基于elasticsearch6.3.2 elasticsearch(一) 之 elasticsearch初识 elasticse ...

  4. 链式编程:遇到多个构造器参数(Constructor Parameters)时要考虑用构建器(Builder)

    public class NutritionFacts { private final int servingSize; private final int servings; private fin ...

  5. git升级后jenkins的报错

    1.首先卸载原有的git #yum remove git 2.源码安装新版本的git https://www.kernel.org/pub/software/scm/git/ 下载最新的版本,然后编译 ...

  6. elasticsearch版本不同,批量查询也不相同

    网上搜到批量查询可以通过TransportClient实现,但官方推荐使用RestHighLevelClient实现 注意: We plan on deprecating the TransportC ...

  7. SpringMVC源码阅读:定位Controller

    1.前言 SpringMVC是目前J2EE平台的主流Web框架,不熟悉的园友可以看SpringMVC源码阅读入门,它交代了SpringMVC的基础知识和源码阅读的技巧 本文将通过源码分析,弄清楚Spr ...

  8. Java Bad version

    Eclipse的三个地方需要重新设置: 在工程上点右键,选属性,三个地方: Java Build Path Java Compiler Project Facets:这个地方还可以设置tomcat的r ...

  9. 17.async 函数

    async 函数 async 函数 含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖. 前文有一个 ...

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

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