网站表单输入框在iPhone设备上无法显示输入内容的求助

针对你遇到的iPhone设备上输入框无法显示输入文本的问题，结合你的代码，给出以下排查和解决方向：

1. 验证CSS变量的颜色取值 #

你的输入框文字颜色使用了var(--white)，背景色是var(--grey-color)，先确认这两个CSS变量的实际取值：

• 如果--white的颜色和背景色--grey-color过于接近，或者是透明值，会导致输入的文字肉眼不可见
• 可以临时将.campo的color属性改为固定值（比如color: #ffffff）测试，看是否能正常显示输入内容

2. 调整自动补全属性 #

iPhone Safari对autocomplete='off'的处理存在兼容性问题，可能干扰输入框的正常渲染：

• 针对用户名输入框，将autocomplete='off'改为autocomplete='username'
• 或者暂时移除该属性，测试输入框是否恢复正常

3. 修复重复绑定事件的问题 #

你的label函数每次触发onfocus时，都会给输入框新增一个focusout事件监听，多次聚焦后会导致逻辑混乱，甚至可能影响输入框的状态：
修改JS代码，确保只绑定一次focusout事件：

function label(e, label) {
    var lab = document.querySelector(label);
    var plac = e.placeholder;
    e.placeholder = "";
    e.style.boxShadow = "0px 0px 0 0.4px var(--verde)";
    e.style.borderRadius = "3px";
    lab.style.opacity = "1";
    
    // 先移除已有事件，避免重复绑定
    e.removeEventListener('focusout', onFocusOutHandler);
    e.addEventListener('focusout', onFocusOutHandler);
    
    function onFocusOutHandler() {
        if (e.value !== "") {
            lab.style.opacity = "1";
        } else {
            e.style.boxShadow = "0px 0px 0px 0px transparent";
            e.placeholder = lab.innerText;
            e.style.borderRadius = "3px";
            lab.style.opacity = "0";
        }
    }
}

4. 检查是否存在文本选择限制 #

如果输入框或其父元素设置了user-select: none，iPhone上会无法选中输入文本，导致看起来像是输入不显示。给.campo添加以下CSS属性：

.campo {
    /* 原有属性保持不变 */
    user-select: text;
    -webkit-user-select: text; /* 针对Safari的前缀 */
}

5. 逐步简化测试 #

先创建一个极简版的输入框：

<input class='campo' type='text' placeholder='Test'>

只保留基础的CSS样式，测试是否能正常输入。如果可以，再逐步添加onfocus事件、required等属性，定位具体是哪个部分导致的问题。

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