前端开发：点击文本输入框时第二个文本框异常缩小问题求助

云原生阿岚

2026-8-27

问题现象

点击文本输入框时，第二个文本输入框会异常缩小。
问题复现动图
第一段相关代码截图
第二段相关代码截图

修复方案

这个问题基本是下面两个原因导致的，挨个查就行：

父容器用了flex布局但没配置子项收缩规则，叠加移动端输入框聚焦时的默认页面缩放行为，把第二个输入框挤小了
直接给输入框加下面的样式就能解决：
```
input {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%; /* 替换成你实际需要的输入框宽度 */
}
```
如果是移动端H5场景，顺便改下视口meta标签，禁止聚焦时自动缩放：
```
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
```
要是父flex容器是横向排列的，再加个flex-wrap: wrap，避免空间不够的时候硬压子元素。
聚焦事件的逻辑绑错了DOM
检查你给输入框绑的focus、blur事件回调，看是不是误给第二个输入框加了小宽度样式、错挂了缩放类名，动态算输入框宽度的时候，确认下取到的DOM是不是当前触发聚焦的那个输入框，别拿错节点。