贝聊科技：自适应高度输入框的新方案

2023-11-17 10:31:52

前言

前段时间在项目开发中遇到这样一个需求——文本输入框的高度要随着框内文本所占高度而变化。这是个看似简单但实现起来有些曲折的需求。在浏览器中，通过CSS样式设置高度后，若内容的高度超过了元素本身的高度，则内容将溢出并产生滚动条。下面讲一下实现方案的探索过程。

方案 1：contenteditable

首先想到的方法，是使用 HTML 5 中新增的contenteditable属性。它可以把元素变成可编辑状态，同时让其保留原有的特性（如元素高度根据元素内容所占高度而变化）。因此，我们可以通过contenteditable属性将文本输入框变成可编辑元素，这样它的高度就会自动适应内容的高度了。

但这个方案存在一些问题：

不能使用输入框自带的样式 。contenteditable属性会覆盖输入框原有的样式，导致输入框失去其原本的外观和行为。
不能使用输入框的内置功能 。contenteditable属性会禁止输入框的内置功能，如自动完成、密码输入等。

方案 2：纯 CSS 实现

既然contenteditable属性不能满足我们的需求，那我们只能另辟蹊径了。经过一番思考，我们决定使用纯 CSS 来实现这个功能。

纯 CSS 实现自适应高度输入框的思路是：

使用flexbox布局，让输入框的父元素的高度根据子元素（输入框）的高度自动变化。
通过CSS样式设置输入框的高度为auto，这样输入框的高度就会自动适应内容的高度了。

具体实现代码如下：

<div class="input-container">
    <input type="text" placeholder="请输入内容">
</div>

<style>
.input-container {
    display: flex;
    flex-direction: column;
    height: auto;
}

input[type="text"] {
    height: auto;
}
</style>

这种方法可以满足我们的需求，但也有一个缺点：当输入框的内容过少时，输入框的高度会变的很小，影响用户体验。

方案 3：结合 JavaScript 实现

为了解决方案 2 的缺点，我们可以结合 JavaScript 来实现自适应高度输入框。

JavaScript 实现自适应高度输入框的思路是：

使用JavaScript监听输入框的内容变化。
当输入框的内容发生变化时，通过JavaScript修改输入框的高度，使其高度与内容的高度一致。

具体实现代码如下：

<div class="input-container">
    <input type="text" placeholder="请输入内容" id="input">
</div>

<script>
// 获取输入框元素
var input = document.getElementById('input');

// 添加输入框内容变化事件监听器
input.addEventListener('input', function() {
    // 计算输入框内容的高度
    var contentHeight = this.scrollHeight;

    // 设置输入框的高度
    this.style.height = contentHeight + 'px';
});
</script>