前言

业务开发中，经常会遇到文本输入框高度随着输入内容高度变化的情况，下面我们来详细说明一下实现这种输入框的方案和解题思路

方案一为一种扩展思路,仅供参考
方案二为常规思路，急着用的小伙伴建议直接看二
第三个板块附上了react native和react native to web的代码实现方案

※方案一：contenteditable属性法

contenteditable属性表示元素是否可编辑，变为可编辑状态的元素还保留其原有的特性，属性值为如下两者之一
-true或空字符串，表示元素是可编辑的；
-false表示元素不是可编辑的；
该属性是一个枚举属性，而非布尔属性。这意味着必须显式设置其值为 true、false 或空字符串中的一个，最好不要简写为<label contenteditable>Example Label</label>
正确的用法是 :

<element contenteditable="value">   --value=true/false

🌰分析

<style type="text/css">
    .container {
        padding: 20px;
    }
    .auto-input {
        min-height: 100px;
        font-size: 30px;
        border: 1px solid red;
    }
</style>

<body>
    <h1>contenteditable实现的高度自适应输入框</h1>
    <div class="container">
      <div class="auto-input" contenteditable="true" id="auto-input"></div>
    </div>
</body>

注意事项：如想要设置文本输入框的默认高度，设置min-height即可，文本输入框同时支持focus,blur事件，但是即使外表伪装的和textarea一模一样，还是有需要注意的坑点，试着分别输入和复制内容，查看dom节点的变化：
以下为手打内容和复制黏贴的区别

image

可以看出内容其实并不是真正的纯文本，而是带有样式的富文本格式，黏贴进去的内容呈现的还是复制前的样式，我们可以通过innerText获取到里面的纯文本内容

image

保留此功能很适合展示图片，复制一张图片进入输入框中可直接展示

image

纯文本设置方法：为了完成和textarea同样的作用，我们可以在输入时进行过滤，保证输入的是纯文本文件，有两种办法

在css中设置

div[contenteditable] {
    user-modify: read-write-plaintext-only
}

user-modify  可以控制普通元素是否可读写
user-modify: read-only; // 只读    
user-modify: read-write; // 可读写，支持富文本   
user-modify: write-only; // 只写，支持的浏览器很少     
user-modify: read-write-plaintext-only;//可读写，纯文本，目前只有webkit内核浏览器支持

在html中给div增加属性

<div contenteditable="plaintext-only">

结果分析：
这种方案的缺点在于，一个元素加上contenteditable，即使解决了可编辑的问题，但是表单控件的一些特性placeholder，maxlength，autofocus，只能js去辅助完成，在移动端会有一些兼容性的问题

方案二：纯textarea文本框实现

思路初始化—创建textarea元素

我们预期通过一个文本输入框textarea即可完成高度自适应，但是实际表明，如果只是通过textarea和一些简单的css方法，设置textarea的min-height后会发现，当输入的元素内容的高度超过设置的最小高度时，会产生滚动条，显然不符合我们的预期

进展1—获取元素的`scrollTop`和`offsetHeight`并设置高度

既然产生了滚动条，那就可以尝试着获取文本框的scrollTop，加上文本框的原有高度，在监听到文本框内容改变的时候重新设置文本框的高度
我们用offsetHeight来获取文本框的高度，该属性包含文本框的border + padding + content的高度，因此我们要在css中将textarea设置为border-box，方便设置的时候统一
最后元素高度的设置后只是相当于增加了scrollTop部分的值
实现步骤如下:
1. input监听文本框内容的改变
2. 获取文本框的滚动距离scrollTop
3. 获取文本框的高度offsetHeight
4. 设置文本框的新height为scrollTop+offsetHeight
🌰分析：

css:
    <style>
      body,
      html {
        padding-left: 0.1rem;
        margin: 0;
      }
      .auto-input {
        display: block;
        box-sizing: border-box;
        outline: none;
        resize: none;
        padding: 0;
        width: 2rem;
        height: 30px;
        border: 1px solid #000;
        font-size: 0.2rem;
      }
      .title {
        font-size: 0.2rem;
      }
    </style>
html:
 <body>
    <h1 class="title">textarea js高度自适应输入框</h1>
    <textarea class="auto-input" id="autoInput"></textarea>
  </body>
script:
  <script>
      var autoInput = document.getElementById("autoInput");
      autoInput.addEventListener("input", function() {
        var inputScrollTop = autoInput.scrollTop;
        var inputHeight = autoInput.offsetHeight;
        console.log("inputScrollTop:" + inputScrollTop + 'px')
        autoInput.style.height = inputScrollTop + inputHeight + "px";
      });
    </script>

测试结果如下：

image

结果分析：在输入到下一行的时候，第一个导致换行的字符在触发input事件的时候获取到的scrollTop的值并未改变，仍然为旧值，直到输入新一行的第二个字符的时候才有所响应，猜测原因是scrollTop的获取时机太早导致的问题

进展2—增加定时器延缓执行

我们尝试在js中获取scrollTop时外加入定时器，延缓获取时机

 var autoInput = document.getElementById("autoInput");
      autoInput.addEventListener("input", function() {
          setTimeout(()=>{
            var inputScrollTop = autoInput.scrollTop;
            var inputHeight = autoInput.offsetHeight;
            console.log("inputScrollTop:"+inputScrollTop+'px');
            autoInput.style.height = inputScrollTop + inputHeight + "px";
          },0)
      });

测试结果如下：

image

结果分析：确实如预期，添加定时器延缓了获取scrollTop的时机后，在换行时获取到的scrollTop为准确的。

进展3—获取元素的`scrollHeight`并设置高度

虽然在开发过程中定时器确实能解决很多头疼的问题，但是个人觉得不是很优雅，这里我们尝试着去获取另一个属性，scrollHeight，对于滚动元素来说scrollHeight代表的是元素原有的高度加上内容滚动到底部时的scrollTop，换句话说也就是元素的完整内容高度，这个属性包含元素的padding，不包含border和margin
需要注意获取的scrollHeight本身是不包含边框的高度的，但是我们要重置的height，因为设置为border-box，是包含边框的，因此需要将scollHeight加上边框后再设置给textarea的height
实现步骤如下:
1. 监听元素变化时我们去获取scrollHeight
2. 设置scrollHeight+border为元素高度
🌰分析:

script:
    autoInput.addEventListener("input", function() {
        var inputScrollHeight = autoInput.scrollHeight + 2;
        console.log("inputScrollHeight" + inputScrollHeight+"px");
        autoInput.style.height = autoInput.scrollHeight + "px";
      });

测试结果：

image

结果分析：当输入元素内容的时候，确实可以如我们预期的，随着内容的增加高度增加，但是删除的时候表现却发现textarea的高度没有变化，scrollHeight是用来获取元素滚动的scrollTop，padding，以及内容的高度的，那么当删除文本内容时它是否会发生变化呢？从上面视频打印的结果来看删除的时候元素的高度并未发生变化
原因如下：如果我们没有给文本框设置高度，随着内容的增加

scrollHeight = scrollMaxTop+clientHeight;//元素高度加滚动最大距离

其中scrollTop会随着内容增加可滚动的距离变大而增加，所以在添加文字的情况下我们可以发现scrollHeight会不断增大
我们将盒子本身的高度设置成scrollHeight，

newClientHeight = scrollHeight

删除的情况下，盒子高度足够是没有滚动距离的，因此scrollMaxTop为0，newClientHeight不会再更新，因此盒子也就维持了之前的高度

scrollHeight = 0 + newClientHeight

进展4—重置元素的高度

上面因为删除时scrollHeight并不会变化导致元素的高度维持在了之前的最大值，那么我们如果在删除元素时，将元素的高度设置成根据内容自适应(auto)/("")，这样textarea的高度会被重置成最小化
最小化之后重新获取到的scrollHeight，又是可以让当前内容自适应的高度
需要注意auto和""两者的区别如果设置为auto的话 textarea的高度会被重置为默认高度，默认高度不是指css中设置的高度，而是浏览器默认的，但是如果设置为（“”）那么相当于清楚的是内联的高度样式，并不会覆盖css的高度，textarea本身的css高度还是存在的，因此表现不同点在于textarea最小时的高度，所以这里建议使用""，可以保留原本设置的高度，但是如果原本设置的是textarea的min-height而不是height，那两个属性均可
实现步骤如下:
1. 监听元素变化时我们将元素的height设置为““，目的是为了清楚上一次的高度
2. 重新获取元素的scrollHeight
3. 设置元素的高度为scrollHeight+border
🌰分析

autoInput.addEventListener("input", function() {
        autoInput.style.height = "";
        //注意顺序  需要先重置 再获取 
        var inputScrollHeight = autoInput.scrollHeight + 2;
        console.log("inputScrollHeight" + inputScrollHeight+"px");
        autoInput.style.height = inputScrollHeight + "px";
      });

测试结果：

image

结果分析：到此我们终于完成了输入框的基本功能。但是现在每次Input监听时，我们都会将元素的高度重置为空，并且每次都会获取scrollHeight的高度，无疑会对性能有一些损耗，因此我们后面会尝试一下优化方案。

进展5—优化方案

我们尝试增加一些判断条件来减少不必要的执行
在元素内容增多的时候，我们期望只有当元素内容换行的时候才进行重置操作，但是怎么去监听元素的换行呢，我们可以通过获取到的scrollHeight，当该值增加的时候再去进行设置高度的操作
另一方面当元素内容减少的时候我们才需要将元素的高度置空，是否也可以通过判断scrollHeight的值是否变小才进行这种判断呢，答案无疑是否定的，因为如果不去设置高度为空的话，scrolllHeight的值并不会发生变化，目前想到的判断字符减少的方案为监听输入的字符个数
如果字符数减少的话我们需要将元素的height置为空，然后重新获取元素的scrollHeight,
- 如果减少的字符导致了换行，那么scrollHeight的值会发生变化
- 如果减少的字符没有导致换行，那么scrollHeight没有发生变化
无论哪种情况我们都需要去把scrollHeight的值赋值给textarea的height，否则会变为css中设置的最小高度
因此textarea高度重新设置的的条件为 scrollHeight增加导致换行或者文字内容减少
实现步骤如下:
1. 我们先获取textarea原本的scrollHeight和字符串长度
2. 在监听到内容改变的时候，我们获取一下新内容的长度
3. 如果长度变小重置文本框的高度
4. 然后获取文本框的scrollHeight
5. 如果scrollHeight变大或者元素的height不存在进入到if判断中
6. 将之前存储的文本框的高度设置成新的方便下一次比较
7. 设置文本框的高度为新获取到的scrollHeight+边框结束if语句
8. 最后重置下文本框的新内容的长度
🌰分析

  var lastScrollHeight = autoInput.scrollHeight;
    var lastTextLength = autoInput.value.length;
    autoInput.addEventListener("input", function() {
        var inputTextLength = autoInput.value.length;
        if (inputTextLength < lastTextLength){
            autoInput.style.height = "";
        }
        //注意这句话一定要写在设置height为空的后面，否则获取不到最新的scrollHeight
        var inputScrollHeight = autoInput.scrollHeight;
        //注意如果height为空的话也需要重置高度 否则高度有问题
        if(lastScrollHeight < inputScrollHeight || !autoInput.style.height){
            lastScrollHeight = inputScrollHeight;
            autoInput.style.height = inputScrollHeight + 2 + "px";
        }
        lastTextLength = autoInput.value.length;
    });

测试结果：同上
结果分析：至此已经完成了比较完善的自适应输入框

react native和rn2web的实现方法

RN的实现方案

rn方法提供onContentSizeChange的函数，onContentSizeChange是在内容布局改变（如换行）的时候能获取到当前contentSize中的高度，然后通过state调整为input的高度
🌰分析

_onChange=(event)=> {
        this.setState({
            text: event.nativeEvent.text,
        });
 }
_onContentSizeChange=(event)=> {
        this.setState({
            height: event.nativeEvent.contentSize.height
        });
}
render() {
        return (
            <TextInput  {...this.props}
                multiline={true}
                onChange={this.onChange}
                onContentSizeChange={this.onContentSizeChange}
                style={[styles.textInputStyle, {height: Math.max(35, this.state.height)}]}
                value={this.state.text}/>
        );
    }
}

结果分析：当检测到文本框内容布局变化时，我们便会将获取到的高度置给TextInput组件，该方法已经兼容了删除时的操作

react native to web的实现方案

rn-to-web中只实现了高度变化时会触发onContentSizeChange，但是没有实现内部的逻辑event.nativeEvent属性是不存在的，所以我们要通过类似方案二的解决办法，获取到原生的scrollHeight属性
🌰分析

render() {
        return (
            <TextInput  {...this.props}
                multiline={true}
                onChange={this.onChange}
                onContentSizeChange={event => {
                  const node = this.input._node
                if (node) {
                    node.style.height = 'inherit'
                    const height = node.scrollHeight
                    node.style.height = `${height}px`
                    this.setState({ height })
                  }
               }}
                style={[styles.textInputStyle, {height: Math.max(35, this.state.height)}]}
                value={this.state.text}/>
        );
    }

结果分析：this.input._node获取到的是原生的dom节点，因此里面采用和是方案二同样的处理方式，
基本原理和方案二相同，但是由于onContentSizeChange的触发时机本就是在高度变化的时候，所以react native和react native to web的这两种实现方式均不需要进行优化处理

源码参考：

https://github.com/yyn7/study-demo/tree/master/1.%E9%AB%98%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94%E7%9A%84%E8%BE%93%E5%85%A5%E6%A1%86

写在最后：

第一篇分享文章，感觉写的略有点啰嗦，比较适合新手阅读，后面会逐渐改进，大家有什么想法和优化思路欢迎来交流啊，一起努力成为合格的前端工程师！
最后的最后附上wuli超级无敌可爱的琪琪

image

高度自适应输入框的清晰解题思路

高度自适应输入框的清晰解题思路

前言

※方案一：contenteditable属性法

方案二：纯textarea文本框实现

思路初始化—创建textarea元素

进展1—获取元素的`scrollTop`和`offsetHeight`并设置高度

进展2—增加定时器延缓执行

进展3—获取元素的`scrollHeight`并设置高度

进展4—重置元素的高度

进展5—优化方案

react native和rn2web的实现方法

RN的实现方案

react native to web的实现方案

源码参考：

写在最后：

高度自适应输入框的清晰解题思路

前言

※方案一：contenteditable属性法

方案二：纯textarea文本框实现

思路初始化—创建textarea元素

进展1—获取元素的scrollTop和offsetHeight并设置高度

进展2—增加定时器延缓执行

进展3—获取元素的scrollHeight并设置高度

进展4—重置元素的高度

进展5—优化方案

react native和rn2web的实现方法

RN的实现方案

react native to web的实现方案

源码参考：

写在最后：

进展1—获取元素的`scrollTop`和`offsetHeight`并设置高度

进展3—获取元素的`scrollHeight`并设置高度