Vue.js 实现动态自增长文本区域的实践指南

挑战：实现自适应高度输入框

在前端开发中，创建一个能够根据内容自动调整高度的输入框（即自增长输入框）是一个常见的需求。标准 html <input type="text"> 元素设计为单行输入，不具备自动调整高度的能力。一些开发者可能会尝试使用 <span> 元素并设置 contenteditable 属性来模拟输入框行为，但这带来了新的挑战：如何方便地获取和绑定其内容，尤其是在 vue.js 这样的响应式框架中，v-model 无法直接应用于 contenteditable 元素。这使得数据双向绑定变得复杂，需要额外的事件监听和手动更新。

解决方案：利用 <textarea> 的动态高度调整

鉴于上述挑战，更推荐且更简洁的解决方案是利用 <textarea> 元素。<textarea> 天然支持多行输入，并且可以通过 JavaScript 动态调整其高度。关键在于监听 <textarea> 的输入事件，并根据其内容高度（scrollHeight）来设置元素的样式高度。

核心原理

1. <textarea> 元素： 选择 <textarea> 作为基础，因为它支持多行文本。
2. @input 事件： 监听 <textarea> 的 input 事件。每当用户输入或删除内容时，此事件都会触发。
3. scrollHeight 属性： 这是一个元素的只读属性，表示元素内容（包括由于溢出而不可见的内容）的完整高度。
4. 动态设置 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>

代码解析：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

1. ref('textareaRef'): 我们使用 ref 创建一个模板引用，以便在 JavaScript 中访问 <textarea> DOM 元素。
2. v-model="message": 实现了文本区域内容与 message 响应式变量的双向绑定。
3. @input="adjustHeight": 当用户在文本区域中输入内容时，adjustHeight 方法会被调用。
4. 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;: 将文本区域的高度设置为其内容的实际高度。
5. onMounted(adjustHeight): 在组件首次挂载时调用 adjustHeight，以确保如果 message 初始有内容，文本区域也能正确显示其高度。
6. 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> 的所有优势，是构建动态表单和交互式界面的高效实践。

立即学习“前端免费学习笔记（深入）”；

以上就是Vue.js 实现动态自增长文本区域的实践指南的详细内容，更多请关注php中文网其它相关文章！