要实现输入框随内容宽度自适应，必须用JavaScript监听input事件，通过临时span测量内容宽度并动态设置style.width，同时处理输入法、软键盘等兼容性问题。
input 标签原生不支持 width: auto 或 min-width，直接设 width: fit-content 也无效。真要实现“输入多少字、框就多宽”，必须靠 JavaScript 动态测量内容宽度，再反推设置 style.width。
用 input 事件监听 + getBoundingClientRect() 测量真实渲染宽度
别用 keyup 或 keydown：中文输入法下，按键时文字还没上屏，测的是拼音或空字符串；compositionstart/compositionend 又太绕。最稳的是 input 事件——它在输入法确认、粘贴、删除等所有内容变更后触发。
- 创建一个临时
<span>，把当前input.value（含空格）塞进去，应用和input完全一致的font-size、font-family、padding、border - 用
span.getBoundingClientRect().width获取渲染后宽度 - 加上
input的左右padding和border（用getComputedStyle拿），才是最终应设的width - 记得加
min-width下限（比如60px），否则空值时框会塌缩成一条线
避开 size 属性的坑：它只对等宽字体可靠
size 属性看似简单——<input size="12">，但它的单位是“平均字符宽度”，依赖字体度量。中文字体、变宽字体（如微软雅黑）、字号变化都会让实际显示宽度严重偏移。Chrome 下 size="10" 可能比实际 10 个中文窄 20%，Safari 更甚。
- 仅当页面强制使用等宽字体（
font-family: monospace）且字号固定时，size才可预测 - 遇到中文、emoji、混合输入，
size基本不可信，别为省几行 JS 冒险 - placeholder 长度适配可以单独用
size（因为 placeholder 不变），但用户输入阶段必须换方案
用 contenteditable 替代 input 是更轻量的替代路径
如果不需要表单原生提交、不强依赖 v-model 或 form 关联验证，<div contenteditable="true"> 配合 CSS 是更干净的解法：
立即学习“前端免费学习笔记（深入）”；
- 它天然支持
width: fit-content、min-width、max-width - 不用手动测宽，CSS
white-space: nowrap+display: inline-block就能撑开 - 需补一个
keydown监听回车（event.key === 'Enter'）并preventDefault()，避免换行 - 注意加
tabindex="0"保证键盘可聚焦，否则无法用 Tab 切入
移动端要注意软键盘弹出导致的布局抖动
在 iOS Safari 和部分安卓 WebView 中，软键盘弹出会触发 resize 事件，也可能让 input 的 getBoundingClientRect() 返回异常值（比如高度突变为 0）。这时候强行设 width 可能导致框瞬间缩到极小。
- 在
input事件里加防抖（setTimeout+clearTimeout），延迟 50ms 再执行宽度计算 - 检测
rect.height < 10时跳过本次更新（说明软键盘正在干扰测量） - 始终保留
min-width和max-widthCSS 规则作为兜底，防止 JS 失效时彻底失控
真正难的不是算宽度，而是处理中英文混排、输入法异步上屏、软键盘干扰这三者的叠加态。JS 测宽方案要上线，至少得在 iOS 17+、Android Chrome 120+、Edge 115+ 上实机跑通输入法全流程，不能只测英文直输。
