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. HBase Cli相关操作

    修改HBase表结构之前首先需要disable表,然后进行更改相关表结构信息,最后enable表,如下 1. 动态添加一个或多个列簇 hbase(main):034:0> describe 'H ...

  2. (转)mysql5.7 根据二进制文件mysqlbinlog恢复数据库 Linux

    原文:http://blog.csdn.net/qq_15058425/article/details/61196085 1.开始mysqlbinlog日志功能 先找打my.cnf文件的位置: 2.编 ...

  3. (转)rootvg镜像

    步骤1:查看当前还未加入到其它vg的可用PV  # lspv  hdisk0          00027c6a0507fe17                    rootvg          ...

  4. CSSREM

    一个CSS的px值转rem值的Sublime Text 3自动完成插件. 安装 下载本项目,比如:git clone https://github.com/flashlizi/cssrem 进入pac ...

  5. Eclipse-离线安装Memory Anlysis Tool

    Eclipse版本:Version: Mars.2 Release (4.5.2) 1.从官网下载MAT Memory Anlysis Tool http://www.eclipse.org/mat/ ...

  6. SPSS学习系列之SPSS Modeler Server是什么?

    不多说,直接上干货! SPSS Modeler 使用客户端/服务器体系结构将资源集约型操作的请求分发给功能强大的服务器软件,因而使大数据集的传输速度大大加快.除了此处所列的产品和更新,也可能还有其他可 ...

  7. #pragma的一些用法

    1.#pragma message message 参数:Message参数能够在编译信息输出窗口输出相应的信息,这对于源代码的信息控制特别重要,其使用方法为: #pragma message(&qu ...

  8. MySQL decimal unsigned 更新负数不报错却为0

    今天在验证接口的并发问题时,把之前通过 redis 解决的并发压力转移到 mysql 上(redis 在 set 保存数据和数据过期需要去向数据库获取时存在时延,会存在空挡造成大并发多插入数据的风险: ...

  9. 我的zsh 配置

    # If you come from bash you might have to change your $PATH.# ZSH的环境变量export ZSH=/Users/lorialex/.oh ...

  10. linux tar 命令

    tar [-cxtzjvfpPN] 文件与目录 ....参数:-c :建立一个压缩文件的参数指令(create 的意思):-x :解开一个压缩文件的参数指令!-t :查看 tarfile 里面的文件! ...