如何让文本框自适应文字大小

在网页表单设计中，文本框（<input> 和 <textarea>）经常需要根据用户输入的文字自动调整尺寸，以提供更流畅的交互体验。本文将介绍几种常见且实用的方法，帮助开发者轻松实现文本框自适应文字。

一、单行输入框（input）宽度自适应

1. 使用 CSS + contenteditable

最简洁的方案是利用 contenteditable 属性，但需注意其并非标准输入框。不过，通过模拟输入框样式，可以达到自动宽度效果。

<span contenteditable="true" style="display: inline-block; min-width: 50px; border: 1px solid #ccc;"></span>

2. 借助隐藏元素计算宽度

使用 JavaScript 动态计算输入内容的宽度，并设置输入框的宽度。示例：

<input type="text" id="myInput" style="width: 50px;">
<script>
const input = document.getElementById('myInput');
const mirror = document.createElement('span');
mirror.style.cssText = 'visibility:hidden; white-space:pre; font-size:' + getComputedStyle(input).fontSize;
document.body.appendChild(mirror);
input.addEventListener('input', function() {
  mirror.textContent = this.value || this.placeholder;
  this.style.width = mirror.offsetWidth + 'px';
});
</script>

二、多行文本框（textarea）高度自适应

1. 纯CSS方法（仅适用于固定行数）

使用 resize: none 禁止用户拖拽，配合 overflow: hidden 并利用 rows 属性？实际上无法自动增长。纯CSS无法完全自适应，但可以结合 field-sizing: content（实验性）或 content 属性。

2. JavaScript动态调整高度

经典做法是监听 input/change 事件，将 scrollHeight 赋值给 height。

<textarea id="autoTextarea" style="overflow: hidden; resize: none; min-height: 50px;"></textarea>
<script>
textarea.addEventListener('input', function() {
  this.style.height = 'auto';
  this.style.height = this.scrollHeight + 'px';
});
</script>

注意：每次重置高度为 'auto' 再设置 scrollHeight，避免高度只增不减。

3. 使用 contenteditable 模拟 textarea

用 div 替代，设置 contenteditable="true"，再通过样式模拟输入框。此方法可以天然实现自适应，但需要处理表单提交时取值。

<div contenteditable="true" style="border: 1px solid #ccc; min-height: 50px; padding: 4px;"></div>

三、综合示例：自适应输入框组件

以下是一个完整的自适应输入框组件，融合了宽度和高度自适应，适用于单行和多行场景。请根据实际需求选择实现。

<!DOCTYPE html>
<html>
<head>
  <style>
    .auto-input {
      display: inline-block;
      min-width: 100px;
      border: 1px solid #aaa;
      padding: 4px;
      font-size: 16px;
      line-height: 1.4;
      outline: none;
      word-break: break-all;
    }
  </style>
</head>
<body>
  <div contenteditable="true" class="auto-input" placeholder="请输入内容"></div>
  <script>
    // 如果希望单行，可强制 white-space: nowrap
  </script>
</body>
</html>

四、注意事项

• 性能优化：对于高度自适应，建议使用防抖（debounce）减少频繁触发。
• 兼容性：部分旧浏览器可能不支持 scrollHeight 或 contenteditable，需进行polyfill。
• 样式统一：确保镜像元素或 contenteditable 的字体、边框等与输入框一致，否则宽度计算会偏差。

结语

文本框自适应文字并不复杂，根据具体场景选择合适的方法即可。纯 CSS 方案简洁但有限制，JavaScript 方案更灵活。希望本文能帮助您快速实现这一功能，提升用户体验。