小程序/网页实现textarea高度随内容自动改变

需求

textarea默认的高度不是对着内容变化，而是随着内容增多，出现了滚动条。目前的需求是实现一个能够输入的textarea，并且高度跟着内容变化。

发现了一个比较好用的插件flexText，但是这个基于jquery写的，目前的技术栈是react，所以简单看了下，然后用原生的js模拟了一个实现。

原理：

html结构：


<div class="body">
    <div class="container">
        <pre class="pre"><span /><br /><br /></pre>
        <textarea class="content" placeholder="请输入内容" oninput="changeContent()"></textarea>
    </div>
</div>

样式：

最外层的div不需要样式，重点在里面的pre和textarea

textarea绝对定位，高度为100%，也就是高度随着外面container的高度变化。

pre是块元素，占用空间但是不可见。在textarea输入的时候，实时的把内容写入到pre中，因为pre是container的子元素，且所以外层container的高度会被pre的高度撑开。


.container{
    position: relative;
} 
.content{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    background: transparent;
    outline:0;
    resize:none;
    overflow:hidden;
}  
.container pre {
    display:block;
    visibility:hidden;
}

js实时把textarea内容写入到pre：


function changeContent(){
    var $textarea = document.getElementsByClassName('content');
    var $pre = document.getElementsByClassName('pre');
    $pre[0].innerHTML = $textarea[0].value;
}

简陋的源码


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .container{
            position: relative;
        } 
        .content{
            position:absolute;
            top:0;
            left:0;
            height:100%;
            background: transparent;
            outline:0;
            font-size: inherit;
            color: inherit;
            line-height: inherit;
            text-indent: inherit;
            letter-spacing: inherit;
            resize:none;
            overflow:hidden;
        }  
        .container pre {
            display:block;
            visibility:hidden;
        }
 
    </style>
</head>
<body>
    <div class="body">
        <div class="container">
        <pre class="pre"><span /><br /><br /></pre>
        <textarea class="content" placeholder="请输入内容" oninput="changeContent()"></textarea>
        </div>
    </div>
    <script>
        function changeContent(){
            var $textarea = document.getElementsByClassName('content');
            var $pre = document.getElementsByClassName('pre');
            $pre[0].innerHTML = $textarea[0].value;
        }  
    </script>
</body>
</html>

使用oninput而不是onchange的原因：

onkeyup使用复制粘贴时，高度不能自动改变

onchange事件：在内容改变（两次内容有可能相等）且失去焦点时触发，不能实时同步

oninput事件：HTML5 的标准事件，可以用来检测元素通过用户界面发生的内容变化，在内容修改后立即被触发

小程序中的实现

wxml:

<view class="text-box">
      <text>{{currentInput}}</text>
      <textarea class="weui-textarea" placeholder="请输入文本" bindinput="getInput" maxlength="1000"/>
</view>

wxss:

.text-box{
    width:100%; 
    position: relative;
    min-height:80rpx;
　  margin-top:17rpx;
}
.text-box text{
   display:block;
   visibility:hidden;
   word-break:break-all;
   word-wrap:break-word;
}
.text-box .weui-textarea{
    height:100%;
    position: absolute;
    left:0;
    top:0;　
    overflow-y:hidden;
    word-break:break-all;
    word-wrap:break-word;
}

js:

Page({
  data: {
    currentInput:''
  },
  getInput:function(e){
    this.setData({
      currentInput: e.detail.value
    })
  }
})

提醒：默认textarea应该是200个字，如果想要增加字数限制，使用maxlength属性

扩展：如果想给textarea输入的文字加删除线，只需把text的visibility:hidden; 属性去掉，给textarea加一个透明的颜色就可以了。透明颜色：color:rgba(52, 52, 52,0.5);

链接：https://blog.csdn.net/liuwengai/article/details/78987957