React登录表单自动补全需两次点击及样式异常问题求助

问题概述 #

我有一个简单的React登录表单，组件和样式代码如下，在Chrome浏览器中遇到两个问题：

• 点击用户名输入框时，仅显示普通自动补全选项，不会直接弹出密码填充建议；只有用户名输入框已填充后再次点击，才会出现密码填充选项。
• 使用浏览器的密码填充建议后，密码输入框的自定义样式全部丢失。

组件代码 #

import React, { ChangeEvent, useState, useEffect } from "react"
import axios from "axios";
import { useNavigate } from 'react-router-dom';
import classnames from "classnames";

import "./Login.scss";

export default function Login() {
    const [user, setUser] = useState('');
    const [password, setPassword] = useState('');
    const [canSubmit, setCanSubmit] = useState(false);
    const navigate = useNavigate();
    useEffect(() => {
        setCanSubmit(!!user && !!password)
    }, [user, password])

    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
        const { name, value } = event.target;

        if (name === "username") {
            setUser(value);
        } else {
            setPassword(value);
        }
    };

    const onSubmit = async e => {
        e.preventDefault();

        if (!canSubmit) {
            return;
        }

        try {
            await axios.post("/api/admin/login", {
                username: user,
                password
            });
        } catch (error) {
            alert("lol " + error);
            return;
        }

        navigate("/admin");
    };

    return <form onSubmit={onSubmit} autoComplete="on">
        <div className="login flex-column flex-align-items-center flex-align-self-center">
            <div className="title">LOGIN</div>

            <div className="field">
                <label htmlFor="username">Username</label>
                <input type="text" placeholder="Enter your username" value={user} name="username" onChange={handleChange} />
            </div>
            <div className="field">
                <label htmlFor="password">Password</label>
                <input type="password" placeholder="Enter your password" value={password} name="password" onChange={handleChange} />
            </div>

            <button type="submit" className={classnames({ 'disabled': !canSubmit })}>Login</button>
        </div>
    </form>
}

SCSS样式代码 #

input {
  background-color: transparent;
  outline: none;
  border: none;
  padding-bottom: 10px;
  padding-left: 1.5rem;
  font-size: 1.3rem;

  box-sizing: border-box;
  box-shadow: inset 0px -3px 0px 0px rgba(187, 187, 187, 0.2);
  transition: box-shadow 0.2s ease-in;

  &:focus {
    box-shadow: inset 0px -3px 0px 0px rgba(34, 193, 195, 0.7);
    outline: none;
  }

  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus {
    color: white !important;
    background-color: #12130f !important;
  }
}

解决方案 #

1. 修复密码填充建议不触发的问题 #

Chrome密码管理器需要明确识别登录表单及输入框角色，通过以下调整让浏览器正确触发密码填充：

• 给用户名输入框添加autocomplete="username"属性，密码输入框添加autocomplete="current-password"属性
• 保留表单的autocomplete="on"属性，帮助浏览器识别表单用途

修改后的输入框代码片段：

<div className="field">
  <label htmlFor="username">Username</label>
  <input 
    type="text" 
    placeholder="Enter your username" 
    value={user} 
    name="username" 
    onChange={handleChange} 
    autocomplete="username"
  />
</div>
<div className="field">
  <label htmlFor="password">Password</label>
  <input 
    type="password" 
    placeholder="Enter your password" 
    value={password} 
    name="password" 
    onChange={handleChange} 
    autocomplete="current-password"
  />
</div>

2. 修复密码填充后样式丢失的问题 #

Chrome自动填充时会给输入框添加默认样式覆盖自定义样式，需要扩展CSS选择器并强制保留自定义样式：

• 给-webkit-autofill相关伪类添加完整的自定义样式（包括box-shadow）
• 添加transition: background-color 5000s ease-in-out 0s延迟浏览器背景色替换，避免样式闪烁
• 覆盖-webkit-box-shadow确保阴影样式生效

修改后的SCSS代码：

input {
  background-color: transparent;
  outline: none;
  border: none;
  padding-bottom: 10px;
  padding-left: 1.5rem;
  font-size: 1.3rem;

  box-sizing: border-box;
  box-shadow: inset 0px -3px 0px 0px rgba(187, 187, 187, 0.2);
  transition: box-shadow 0.2s ease-in;

  &:focus {
    box-shadow: inset 0px -3px 0px 0px rgba(34, 193, 195, 0.7);
    outline: none;
  }

  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus,
  &:-webkit-autofill:active {
    color: white !important;
    background-color: #12130f !important;
    box-shadow: inset 0px -3px 0px 0px rgba(187, 187, 187, 0.2) !important;
    -webkit-box-shadow: inset 0px -3px 0px 0px rgba(187, 187, 187, 0.2) !important;
    transition: background-color 5000s ease-in-out 0s !important;
  }
}

额外提示：如果React状态在自动填充时未更新（比如password值为空导致按钮状态异常），可以添加useEffect监听输入框的value变化，或者使用ref手动获取输入框值，确保表单状态正确同步。

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