React中如何让input实现类似display:inline-block的自适应宽度？

原生input的size属性是基于等宽字体的字符计数计算宽度，遇到非等宽字体、中英文混排、emoji、连续空格场景时，根本没法做到和内容完美贴合，这也是之前手动计算字符长度匹配宽度失败的核心原因。

最稳妥的实现方式是加一个隐藏的文本测量节点，让它和输入框保持完全一致的字体、内边距、边框样式，实时同步输入内容拿到准确宽度，直接赋值给输入框即可，精度可以做到完全贴合，同时还能保留原生input的所有交互能力，不用退而求其次用contentEditable。

实现步骤 #

• 新增一个绝对定位隐藏的span作为测量标尺，设置visibility: hidden、left: -9999px把它移出可视区域，不要加display: none，否则无法获取元素真实宽度；给这个span设置和input完全一致的font-size、font-family、font-weight、padding、box-sizing属性，再加white-space: pre避免连续空格被浏览器折叠导致测量不准。
• 输入框聚焦激活、输入内容变化时，把当前输入值同步到测量span上，拿到span的真实宽度后直接赋值给input的width样式即可。
• 原有的聚焦自动全选逻辑可以完全保留，不用做任何修改，比contentEditable实现全选的兼容成本低很多。

修正后的完整代码 #

import { useState, useRef, useEffect } from "react";

// 输入框和测量节点共用的样式，保证两者渲染参数完全一致
const sharedStyle = {
  fontSize: '16px',
  fontFamily: 'system-ui, sans-serif',
  padding: '2px 4px',
  boxSizing: 'border-box',
  margin: 0,
}

export default function App() {
  const [value, setValue] = useState("test");
  const [active, setActive] = useState(false);
  const inputRef = useRef(null);
  const measureRef = useRef(null);

  // 同步测量宽度的方法
  const updateInputWidth = () => {
    if (!inputRef.current || !measureRef.current) return;
    // 把当前值塞给测量节点
    measureRef.current.textContent = value || '';
    // 拿到测量宽度直接赋值给输入框，额外加2px避免文字贴边
    inputRef.current.style.width = `${measureRef.current.offsetWidth + 2}px`;
  };

  useEffect(() => {
    if (active) {
      inputRef.current?.select();
      updateInputWidth();
    }
  }, [active]);

  useEffect(() => {
    updateInputWidth();
  }, [value]);

  return (
    <>
      {/* 测量用隐藏节点 */}
      <span 
        ref={measureRef} 
        style={{
          ...sharedStyle,
          position: 'absolute',
          visibility: 'hidden',
          left: '-9999px',
          whiteSpace: 'pre',
        }} 
      />
      {!active && (
        <span 
          style={{ ...sharedStyle, border: 'none', cursor: 'text' }}
          onClick={() => setActive(true)}
        >
          {value}
        </span>
      )}
      {active && (
        <input
          ref={inputRef}
          value={value}
          style={{
            ...sharedStyle,
            border: '1px solid #ccc'
          }}
          onChange={(e) => setValue(e.target.value)}
          onBlur={() => setActive(false)}
        />
      )}
    </>
  );
}

注意事项 #

• 不要再依赖size属性计算宽度，不同字体下字符实际宽度差异极大，尤其是中文、emoji、特殊符号混排时，测量节点的方案可以做到100%宽度匹配。
• 如果后续调整输入框的字号、内边距、边框样式，一定要同步修改测量节点的对应样式，否则会出现宽度偏差。
• 宽度计算时额外加2px冗余，是为了避免部分字体渲染时边缘裁切文字，切换编辑/展示状态也不会出现内容跳动。

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