自定义浮动标签的Ant Design Input封装组件自动填充值重叠问题

我基于Ant Design Input封装了带浮动标签的自定义组件，用于登录表单的邮箱和密码输入框。但遇到浏览器自动填充登录凭据时，密码字段的填充值会和浮动标签重叠。试过设置密码字段id为new-password、开启自动填充功能，都没解决问题。

组件核心代码如下：

// 样式定义
const customInputStyle = {
  errorStyle: {
    lineHeight: variables.lineHeightSmall,
    fontSize: variables.fontSizeSmall,
    color: variables.error,
    marginTop: variables._0_5Rem,
  },
  labelStyle: {
    color: variables.inputLabel,
    lineHeight: variables.lineHeightSmall,
    fontSize: variables.fontSizeNormal,
    transition: 'all 0.3s ease',
    transform: 'translateY(-50%)',
    position: 'absolute',
    top: variables._50Percentage,
    padding: `0 0 0 ${variables._0_875Rem}`,
  },
  inputStyle: (size, error) => ({
    backgroundColor: variables.primaryBg,
    padding: variables._1Rem,
    fontSize: variables.fontSizeNormal,
    borderRadius: variables._0_125Rem,
    zIndex: 0,
    border: error ? variables.errorLight : variables.inputBorder,
    transition: 'all 0.3s ease',
    ...(size === 'small' && { height: variables.mediumHeight }),
    ':focus': {
      border: `${variables._0_063Rem} solid ${variables.primaryColor}`,
    },
  }),
  requiredStyle: {
    color: variables.error,
    paddingLeft: variables._0_125Rem,
  },
  inputFocusStyle: {
    transform: `translate(${variables._0_75Rem},-${variables._190Percentage})`,
    background: variables.primaryBg,
    padding: `0 ${variables._0_875Rem}`,
  },
  showTextStyle: {
    color: variables.textPrimary,
    cursor: 'pointer',
    borderBottom: `1px solid ${variables.textPrimary}`,
  },
};

// 组件实现
export default function InputComponent({
  threeRowStyle,
  style,
  value,
  onChange,
  className,
  placeholder,
  label,
  labelProps,
  isPassword,
  required,
  error,
  size,
  autoComplete,
  suffix,
  middleSectionStyle,
  labelStyle,
  type = 'text',
  ...props
}) {
  let Component = Input;
  if (isPassword) {
    Component = Input.Password;
  }
  const [focused, setFocused] = useState(false);
  const [visible, setVisible] = useState(false);
  const inputRef = useRef();

  const handleFocus = (e) => {
    setFocused(true);
  };

  const handleBlur = () => {
    setFocused(false);
  };

  const handleClick = () => {
    setVisible(true);
  };

  const renderPasswordToggle = (visible) => {
    return (
      <span style={customInputStyle.showTextStyle} onClick={handleClick}>
        {visible ? 'Hide' : 'Show'}
      </span>
    );
  };

  return (
        <>
          <Component
            {...(isPassword && { iconRender: renderPasswordToggle })}
            ref={inputRef}
            value={value}
            style={{
              ...customInputStyle.inputStyle(size, error),
              ...style,
              ...(error
                ? {
                    border: variables.inputErrorBorder,
                  }
                : {}),
              ...(focused && !error
                ? { border: variables.inputFocusedBorder }
                : {}),
            }}
            onChange={onChange}
            className={className}
            autoComplete={autoComplete || 'off'}
            type={isPassword ? (visible ? 'text' : 'password') : type}
            onFocus={handleFocus}
            onBlurCapture={handleBlur}
            {...props}
          />
          <TextComponent
            style={{
              ...customInputStyle.labelStyle,
              ...(focused || value ? customInputStyle.inputFocusStyle : {}),
            }}
            onClick={() => {
              inputRef.current.focus();
            }}
          >
            {label}
            {required && <span style={customInputStyle.requiredStyle}>*</span>}
          </TextComponent>
        </>
  );
}

原因分析 #

浏览器自动填充凭据时，不会触发常规的focus、change事件，也不会同步更新React组件的value状态，导致组件判断标签上浮的条件focused || value不成立，标签停留在原始位置，和填充值重叠。

方案1：基于输入框实际值判断标签状态 #

直接通过input的DOM元素获取实际值，补充到标签上浮的判断条件中，绕过state不同步的问题。

修改TextComponent的style判断逻辑：

<TextComponent
  style={{
    ...customInputStyle.labelStyle,
    ...(focused || value || (inputRef.current?.value?.length > 0) 
      ? customInputStyle.inputFocusStyle 
      : {}),
  }}
  onClick={() => {
    inputRef.current.focus();
  }}
>
  {label}
  {required && <span style={customInputStyle.requiredStyle}>*</span>}
</TextComponent>

方案2：监听输入框实际值，同步更新组件状态 #

如果需要保持组件的受控状态一致性，可以添加useEffect监听输入框的实际值，当它和props.value不一致时，主动触发onChange更新父组件状态：

useEffect(() => {
  const inputValue = inputRef.current?.value;
  if (inputValue !== value && inputValue !== undefined) {
    onChange?.(inputValue);
  }
}, [inputRef.current?.value, value, onChange]);

方案3：利用CSS :autofill伪类强制上浮标签 #

给输入框和标签加一个共同的容器，然后通过CSS的:has和:autofill伪类，强制自动填充时标签上浮：

1. 给组件外层加容器：

return (
  <div className="floating-input-container">
    {/* 原Input和TextComponent */}
    <Component {...props} />
    <TextComponent {...labelProps} />
  </div>
);

2. 添加CSS样式：

.floating-input-container:has(input:-webkit-autofill) .floating-label {
  transform: translate(0.75rem, -190%);
  background: var(--primary-bg);
  padding: 0 0.875rem;
}

（注意：:has选择器需要Chrome 101+、Firefox 121+支持，若要兼容旧浏览器，可以改用给input加类，结合JS判断自动填充状态）

方案4：正确配置autoComplete属性 #

不要设置autoComplete="off"，浏览器可能会忽略这个设置，改用对应字段的正确值：

• 邮箱字段：autoComplete="username"
• 密码字段：autoComplete="current-password"

在使用组件时传入：

<InputComponent
  label="邮箱"
  autoComplete="username"
  // 其他属性
/>
<InputComponent
  label="密码"
  isPassword
  autoComplete="current-password"
  // 其他属性
/>

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