移动端Safari表单输入内容后失焦Label下移问题求助

问题描述 #

基于React开发的表单组件，PC端可正常实现「输入时Label上移，失焦且有内容时Label保持顶部」的交互逻辑，但在移动端Safari中，输入内容后失焦输入框，Label会回到初始位置，需修复该兼容性问题。

原因分析 #

当前代码同时使用React状态控制Label样式和CSS伪类规则，两者在移动端Safari中可能产生冲突。另外，Safari对:not(:placeholder-shown)伪类的处理存在细节差异，当输入框placeholder设为空格时，可能导致伪类判断异常，失焦后无法维持Label的上移状态。

解决方案 #

推荐完全依赖React状态控制Label样式，移除CSS中的伪类规则，彻底规避浏览器兼容性问题，具体步骤如下：

1. 修改CSS文件（Form.module.css） #

删除以下依赖伪类的样式规则：

.form__item:focus-within .form__label,
.form__input:focus + .form__label,
.form__input:not(:placeholder-shown) + .form__label {
    @apply
    text-[14px]
    ;
    transform: translateY(-20px);
}

2. 保留React状态逻辑（Form.tsx） #

原有的基于watch值判断Label样式的逻辑无需修改，它直接依赖输入框的内容状态，与焦点无关，能确保在任何浏览器中，只要输入框有内容，Label就保持上移样式：

// 示例：name输入框的Label className判断
className={
    !name
    ? `${ styles.form__label } text-[18px]`
    : `${ styles.form__label } text-[14px] translate-y-[-20px]`
}

补充优化（可选） #

如果希望保留焦点时的过渡效果，可单独为:focus-within添加样式，但不依赖它维持有内容时的Label状态：

.form__item:focus-within .form__label {
    @apply text-[14px];
    transform: translateY(-20px);
}

这样，焦点时Label上移，失焦后只要输入框有内容，React状态会持续维持Label的上移样式，彻底解决Safari的兼容性问题。

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