textarea高度随内容自动改变

待我称王封你为后i 2022-06-02 06:25 208阅读 0赞

### 需求 ###

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

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

### 原理： ###

##### html结构： #####

##### 样式： #####

最外层的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 的标准事件，可以用来检测元素通过用户界面发生的内容变化，在内容修改后立即被触发