输入框宽度动态设置方法

本文介绍一种纯前端 JavaScript 方案，通过创建隐藏的样式镜像元素测量每列输入框中 value 文本的实际渲染宽度，并自动为同列所有输入框设置统一、紧凑且带安全内边距的宽度，无需硬编码 CSS 或依赖用户交互。

本文介绍一种纯前端 JavaScript 方案，通过创建隐藏的样式镜像元素测量每列输入框中 `value` 文本的实际渲染宽度，并自动为同列所有输入框设置统一、紧凑且带安全内边距的宽度，无需硬编码 CSS 或依赖用户交互。

在构建数据库管理类表单（如药品处方信息编辑页）时，常面临一个视觉一致性难题：表格中各列 <input type="text"> 的初始 value 长度差异很大（例如“KeyID”列可能仅含 4 位数字，而“Name”列可能显示长达 25 字符的药名），但若统一设为固定宽度（如 width: 85%），会导致短内容留白过多、长内容被截断或换行——既影响可读性，也破坏表格对齐。

CSS 原生不支持“按 value 属性长度自适应宽度”，而常见的 contenteditable 或 resize 方案仅响应用户输入，无法解决服务端预填充后首次渲染即需精准适配的需求。本文提供一个轻量、可靠、无依赖的解决方案：基于 DOM 测量 + CSS 自定义属性驱动的列级宽度计算。

核心思路

1. 样式克隆：创建一个不可见的 <div> 元素，精确复制目标输入框的所有计算样式（字体、字号、字重、padding、letter-spacing 等）；
2. 逐列测量：遍历表格中每个文本输入框，将其 value 写入克隆 <div>，读取其 clientWidth，按 <td> 的 cellIndex 分组记录该列最大宽度；
3. CSS 变量注入：将各列最大宽度存为 --widthN 自定义属性，并通过 :nth-child(N) 选择器为对应列输入框绑定 width: var(--widthN)；
4. 预留安全边距：在最终宽度中自动添加 4px 水平内边距（可通过调整 div.style.padding = '0 4px' 灵活配置）。

实现代码（推荐放入 </body> 底部或 DOMContentLoaded 回调中）

<!-- 在 HTML 底部或 JS 模块中 -->
<script>
const autoFitInputWidths = (() => {
  // 创建隐藏测量容器
  const measureDiv = document.createElement('div');
  measureDiv.className = 'input-width-measurer';
  measureDiv.style.cssText = `
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    white-space: pre !important;
    overflow: hidden !important;
    text-align: left !important;
    padding: 0 4px !important; /* 关键：模拟 input 内边距 */
    border: none !important;
    box-sizing: content-box !important;
  `;
  document.body.appendChild(measureDiv);

  // 复制目标 input 的计算样式（聚焦字体与排版相关属性）
  const targetInputs = document.querySelectorAll('.modify input[type="text"]:not(.split)');
  if (targetInputs.length === 0) return;

  const baseStyle = getComputedStyle(targetInputs[0]);
  const copyProps = [
    'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'letterSpacing',
    'lineHeight', 'textTransform', 'textAlign'
  ];
  copyProps.forEach(prop => {
    measureDiv.style[prop] = baseStyle[prop];
  });

  return () => {
    // 初始化每列最大宽度数组（索引对应 cellIndex）
    const maxWidths = [];

    // 第一遍：收集每列最大渲染宽度
    targetInputs.forEach(input => {
      const cell = input.closest('td');
      if (!cell) return;
      const colIndex = cell.cellIndex;
      measureDiv.textContent = input.value || '';
      const width = Math.ceil(measureDiv.clientWidth);
      if (!maxWidths[colIndex] || width > maxWidths[colIndex]) {
        maxWidths[colIndex] = width;
      }
    });

    // 第二遍：为表格设置 CSS 变量（注意：需确保 .modify 是最近的共同祖先）
    const table = document.querySelector('.modify');
    if (!table) return;

    maxWidths.forEach((w, i) => {
      if (w) {
        table.style.setProperty(`--input-col-${i + 1}-width`, `${w}px`);
      }
    });
  };
})();

// 执行宽度适配（确保 DOM 已加载完成）
document.addEventListener('DOMContentLoaded', () => {
  autoFitInputWidths();
});
</script>

对应 CSS（需添加到你的样式表中）

/* 为每列输入框绑定动态宽度 */
.modify td:nth-child(1)  input[type="text"]:not(.split) { width: var(--input-col-1-width, 60px); }
.modify td:nth-child(2)  input[type="text"]:not(.split) { width: var(--input-col-2-width, 80px); }
.modify td:nth-child(3)  input[type="text"]:not(.split) { width: var(--input-col-3-width, 120px); }
.modify td:nth-child(4)  input[type="text"]:not(.split) { width: var(--input-col-4-width, 120px); }
.modify td:nth-child(5)  input[type="text"]:not(.split) { width: var(--input-col-5-width, 100px); }
.modify td:nth-child(6)  input[type="text"]:not(.split) { width: var(--input-col-6-width, 140px); }
.modify td:nth-child(7)  input[type="text"]:not(.split) { width: var(--input-col-7-width, 70px); }
.modify td:nth-child(8)  input[type="text"]:not(.split) { width: var(--input-col-8-width, 90px); }
.modify td:nth-child(17) input[type="text"]:not(.split) { width: var(--input-col-17-width, 100px); }

/* 保留原有 .split 类样式（频率拆分输入框） */
.split {
  width: 30px;
  text-align: center;
  border-radius: 0;
}

/* 清理测量容器（不影响布局） */
.input-width-measurer {
  all: unset;
}

注意事项与优化建议

• ✅ 兼容性：基于 getComputedStyle 和 CSS 自定义属性，支持 IE11+（IE11 需用 setProperty 而非 style['--var']）；
• ⚠️ 性能：适用于百行以内表格，若数据量极大（>500 行），可增加防抖或分帧处理；
• ? 特殊列处理：.split 类输入框（如“Quantity / Frequency”拆分为两栏）已排除在自动适配外，保持固定宽度，避免逻辑冲突；
• ? 最小宽度保障：CSS 中 var(--xxx, 60px) 提供回退值，防止空值导致输入框塌缩；
• ? 响应式友好：该方案不依赖视口尺寸，与媒体查询完全正交，可组合使用；
• ? 进阶扩展：如需支持多语言（如中英文混排）、等宽字体场景，可在 measureDiv 中显式设置 font-family: monospace 或添加语言检测逻辑。

此方案彻底摆脱了“估算字符数 × 平均像素宽度”的粗糙做法，真正实现所见即所得的宽度自适应，让后台生成的表单在首屏渲染时即呈现专业、紧凑、易读的 UI 效果。