iOS input[type="number"]禁用小数点因系统限制，应改用input[type="text"]+inputmode="decimal"；label无法聚焦多因id不匹配或含非法字符；textarea在微信WebView光标错位需重置样式或scrollIntoView；submit按钮无响应常因z-index遮挡或touch-action:none。
input[type="number"] 在 iOS 上会触发数字键盘但无法输入小数点
iOS Safari 对 input[type="number"] 的实现很保守：默认只允许整数，即使你写了 step="0.1" 或 min="0"，小数点仍可能被禁用或自动删除。
根本原因是 iOS 把 type="number" 当作“整数输入控件”，不尊重 HTML5 的浮点语义。真要支持小数，得换思路：
- 改用
input[type="text"]+inputmode="decimal"（现代 iOS/Android 都认） - 加上
pattern="[0-9]*\.?[0-9]*"和inputmode="numeric"作为降级兜底 - 避免依赖
type="number"做校验，JS 层用parseFloat()+ 边界判断更可靠
点击 label 无法聚焦 input 的常见原因
HTML 中 <label for="xxx"></label> 和 <input id="xxx"> 不匹配是最常见问题，但手机上还有两个隐藏坑：
-
id值含空格、中文或特殊字符（如id="price input"），iOS Safari 会静默忽略绑定 - 动态插入的表单元素没等 DOM 渲染完就绑定事件，导致
label点击无响应 - CSS 设置了
pointer-events: none在父容器上（比如某些「全屏遮罩」组件）
验证方法：用 Safari 开发者工具远程调试，检查 label 的 for 值和对应 input 的 id 是否完全一致（包括大小写）。
立即学习“前端免费学习笔记（深入）”；
textarea 在 Android 微信 WebView 中光标错位
微信内置 WebView（X5 内核）对 textarea 的行高、内边距渲染异常，尤其在设置 line-height 或 padding 后，用户点击时光标位置和实际输入位置明显偏移。
这不是 bug 是设计妥协——X5 为了滚动性能，把文本框高度计算逻辑和原生控件耦合太深。临时解法只有三类：
- 强制重置样式：
textarea { line-height: 1.5; padding: 12px; font-size: 16px; }（避开非整数行高） - 加
resize: none防止用户拖拽改变尺寸后加剧错位 - 监听
focus事件，用setTimeout(() => el.scrollIntoView({ block: 'nearest' }), 50)补偿滚动定位
submit 按钮点击无反应，但 PC 正常
最常踩的坑是用了 button[type="submit"] 却忘了它默认会触发表单提交，而手机上某些场景下这个行为被拦截了：
- 按钮被
position: fixed+z-index覆盖，实际点击区域是透明层 - 表单外层有
touch-action: none（常见于手势滑动库），直接禁掉了所有触摸事件冒泡 - 按钮用了
background: none且没设border，在部分 Android 浏览器里变成“不可点击热区”
排查顺序：先看控制台有没有 Failed to execute 'submit' on 'HTMLFormElement' 报错；再用 Chrome DevTools 的「Toggle device toolbar」模拟，勾选「Disable cache」和「Network Throttling」看是否加载阻塞。
复杂点在于，这些表现往往只出现在特定 WebView 版本或系统组合里，没法靠一套 CSS 全局解决。真要稳，就别省那几行 JS —— 给按钮加个 onclick="this.form?.submit()" 最直接。
