挑战：实现自适应高度输入框
在前端开发中，创建一个能够根据内容自动调整高度的输入框（即自增长输入框）是一个常见的需求。标准 html <input type="text"> 元素设计为单行输入，不具备自动调整高度的能力。一些开发者可能会尝试使用 <span> 元素并设置 contenteditable 属性来模拟输入框行为，但这带来了新的挑战：如何方便地获取和绑定其内容，尤其是在 vue.js 这样的响应式框架中，v-model 无法直接应用于 contenteditable 元素。这使得数据双向绑定变得复杂，需要额外的事件监听和手动更新。
解决方案：利用 <textarea> 的动态高度调整
鉴于上述挑战，更推荐且更简洁的解决方案是利用 <textarea> 元素。<textarea> 天然支持多行输入，并且可以通过 JavaScript 动态调整其高度。关键在于监听 <textarea> 的输入事件，并根据其内容高度（scrollHeight）来设置元素的样式高度。
核心原理
- <textarea> 元素： 选择 <textarea> 作为基础，因为它支持多行文本。
- @input 事件： 监听 <textarea> 的 input 事件。每当用户输入或删除内容时，此事件都会触发。
- scrollHeight 属性： 这是一个元素的只读属性，表示元素内容（包括由于溢出而不可见的内容）的完整高度。
- 动态设置 height： 在 input 事件触发时，获取 <textarea> 的 scrollHeight，并将其设置为 <textarea> 的 CSS height 属性。
示例代码
以下是一个 Vue 3 组件，演示了如何实现一个自增长的 <textarea>：
<script setup>
import { ref, nextTick, onMounted } from 'vue';
// 定义一个响应式变量来存储文本区域的内容
const message = ref('');
const textareaRef = ref(null); // 用于获取textarea元素的引用
// 动态调整textarea高度的函数
const adjustHeight = () => {
if (textareaRef.value) {
textareaRef.value.style.height = 'auto'; // 先重置高度，确保scrollHeight计算准确
nextTick(() => {
textareaRef.value.style.height = `${textareaRef.value.scrollHeight}px`;
});
}
};
// 监听message变化或组件挂载时调整高度
onMounted(adjustHeight); // 首次渲染时调整一次高度，以适应初始内容
</script>
<template>
<div>
<h2>自增长文本区域示例:</h2>
<textarea
ref="textareaRef"
v-model="message"
@input="adjustHeight"
class="auto-grow-textarea"
placeholder="请输入内容..."
rows="1"
></textarea>
<p>当前内容: {{ message }}</p>
</div>
</template>
<style scoped>
.auto-grow-textarea {
width: 100%;
resize: none; /* 禁用用户手动调整大小 */
overflow: hidden; /* 隐藏滚动条 */
box-sizing: border-box; /* 确保padding和border不增加总宽度/高度 */
min-height: 38px; /* 设置一个最小高度，例如一行文字的高度 */
line-height: 1.5; /* 保持行高一致 */
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: inherit; /* 继承父级字体 */
font-size: 16px;
}
</style>代码解析：
- ref('textareaRef'): 我们使用 ref 创建一个模板引用，以便在 JavaScript 中访问 <textarea> DOM 元素。
- v-model="message": 实现了文本区域内容与 message 响应式变量的双向绑定。
- @input="adjustHeight": 当用户在文本区域中输入内容时，adjustHeight 方法会被调用。
-
adjustHeight 函数:
- textareaRef.value.style.height = 'auto';: 这是关键一步。在计算 scrollHeight 之前，将 height 暂时设置为 auto，可以确保 scrollHeight 能够准确反映当前内容所需的最小高度，避免因之前设置的固定高度导致 scrollHeight 不准确。
- nextTick(() => { ... });: nextTick 确保 DOM 更新（height: 'auto'）完成后再获取 scrollHeight。
- textareaRef.value.style.height =${textareaRef.value.scrollHeight}px;: 将文本区域的高度设置为其内容的实际高度。
- onMounted(adjustHeight): 在组件首次挂载时调用 adjustHeight，以确保如果 message 初始有内容，文本区域也能正确显示其高度。
-
CSS 样式 (.auto-grow-textarea):
- resize: none;: 禁用用户通过拖拽右下角手动调整 <textarea> 大小。
- overflow: hidden;: 隐藏可能出现的滚动条，确保完全由 JavaScript 控制高度。
- box-sizing: border-box;: 确保 padding 和 border 不会增加元素的总宽度或高度，这有助于更精确地控制尺寸。
- min-height: 设置一个最小高度，防止文本区域在内容为空时过小。
- rows="1": 这是一个 HTML 属性，建议在 <textarea> 中设置，表示其默认显示为一行，进一步强调其自增长特性。
注意事项与优化
- 初始内容： 如果 <textarea> 存在初始内容，请确保在组件挂载后调用一次 adjustHeight 函数，以正确设置初始高度。在上述示例中，onMounted(adjustHeight) 已经处理了这一点。
- CSS box-sizing： 建议为 <textarea> 设置 box-sizing: border-box;。这样，padding 和 border 将包含在元素的总宽度和高度内，使得 scrollHeight 的计算更符合预期。
- resize 属性： 为了提供更好的用户体验，通常会设置 resize: none; 来禁用用户手动调整 <textarea> 大小。
- 最小高度： 可以通过 CSS min-height 属性为 <textarea> 设置一个最小高度，例如一行文字的高度，以确保在内容为空时也能保持合理的视觉效果。
- 性能： 对于极长文本或高频率输入场景，此方法通常表现良好。但如果遇到性能瓶颈，可以考虑使用防抖（debounce）或节流（throttle）技术来限制 adjustHeight 函数的调用频率。
- 复杂布局： 在某些复杂布局中，scrollHeight 的计算可能会受到父元素样式的影响。确保 <textarea> 及其父元素没有设置可能干扰 scrollHeight 计算的 overflow 或 height 属性。
总结
通过巧妙地结合 <textarea> 元素、@input 事件监听和 scrollHeight 属性，我们可以在 Vue.js 中轻松实现一个功能完善且用户体验良好的自适应高度输入框。这种方法不仅避免了 contenteditable <span> 带来的数据绑定难题，而且提供了原生 <textarea> 的所有优势，是构建动态表单和交互式界面的高效实践。
立即学习“前端免费学习笔记（深入）”；
