如何设置输入框高度自适应匹配多行placeholder段落的高度

解决方案 #

原生单行<input>控件设计为仅支持单行内容，其高度不受placeholder伪元素的高度影响，因此仅通过CSS无法实现输入框高度自适应占位符折行后的高度，可通过以下两种方案实现需求：

方案1：改用<textarea>控件（推荐）

<textarea>本身支持多行内容，可直接适配折行后的占位符高度，还可通过样式调整为普通输入框的视觉效果：

::placeholder {
  white-space: pre-line;  
}
textarea {
  width: 300px;
  min-height: 30px; /* 最小高度，避免无内容时过矮 */
  padding: 2px 5px;
  font: inherit;
  border: 1px solid #ccc;
  resize: none; /* 禁止用户手动拖拽调整大小 */
  box-sizing: border-box;
}

<textarea placeholder="文本内容过长时，我设置了white-space:pre-line让它变成多行段落"></textarea>

如果需要在窗口缩放、字号变化时自动适配高度，可添加以下JS逻辑：

function adjustTextareaHeight(textarea) {
  // 先重置高度为auto，获取正确的滚动高度
  textarea.style.height = 'auto';
  textarea.style.height = textarea.scrollHeight + 'px';
}

const textarea = document.querySelector('textarea');
// 初始化适配
adjustTextareaHeight(textarea);
// 监听窗口缩放事件，重新适配
window.addEventListener('resize', () => adjustTextareaHeight(textarea));

方案2：必须使用<input>时的JS适配方案

通过创建隐藏模拟元素计算占位符高度，动态设置输入框高度：

function adjustInputHeight(input) {
  const placeholderText = input.getAttribute('placeholder');
  if (!placeholderText) return;
  
  // 创建隐藏模拟元素，样式和输入框完全一致
  const mimic = document.createElement('div');
  mimic.style.cssText = `
    position: absolute;
    visibility: hidden;
    width: ${input.offsetWidth}px;
    font: ${window.getComputedStyle(input).font};
    line-height: ${window.getComputedStyle(input).lineHeight};
    padding: ${window.getComputedStyle(input).padding};
    white-space: pre-line;
    word-break: break-all;
  `;
  mimic.textContent = placeholderText;
  document.body.appendChild(mimic);
  
  // 设置输入框高度
  input.style.height = mimic.offsetHeight + 'px';
  // 移除模拟元素
  document.body.removeChild(mimic);
}

const input = document.querySelector('input');
// 初始化适配
adjustInputHeight(input);
// 监听窗口缩放事件，重新适配
window.addEventListener('resize', () => adjustInputHeight(input));

内容的提问来源于stack exchange，提问作者Autodesk