MUI React中信用卡到期年份后两位自动填充问题排查

我正在修复到期时间输入框的自动填充功能，期望自动填充年份的后两位（即YY格式）。我认为当前实现逻辑正确，但自动填充时却取了年份的前两位而非后两位，请问问题出在哪里？

当前代码如下：

<InputField
    id={id}
    name={'YY'}
    label={'YY'}
    placeholder='YY'
    maxlength="2"
    pattern="\d{2}" 
    autoComplete='cc-exp-year'
/>

问题根源 #

问题出在autoComplete='cc-exp-year'属性上：浏览器对cc-exp-year的标准定义是四位完整年份（YYYY），当输入框限制为2位长度时，浏览器会直接截取返回年份的前两位（比如2024会被截成20），而非你期望的后两位。

name={'YY'}只是表单字段的命名，不会改变浏览器自动填充的字段类型识别逻辑，浏览器完全依赖autoComplete属性判断该字段应该填充的格式。

解决方案 #

方案1：保留浏览器自动填充，手动处理格式

保留cc-exp-year属性以利用浏览器的信用卡自动填充能力，同时通过事件监听将四位年份转为后两位：

const handleYearChange = (e) => {
  let value = e.target.value;
  // 若为四位年份则取最后两位，两位则直接保留
  if (value.length === 4) {
    e.target.value = value.slice(-2);
  }
};

<InputField
    id={id}
    name={'YY'}
    label={'YY'}
    placeholder='YY'
    maxlength="2"
    pattern="\d{2}" 
    autoComplete='cc-exp-year'
    onChange={handleYearChange}
/>

方案2：自定义自动填充逻辑，移除浏览器默认识别

如果不需要依赖浏览器的信用卡自动填充，可以移除autoComplete='cc-exp-year'，自己实现年份后两位的填充逻辑（比如默认填充当前年份的后两位）：

import { useEffect, useRef } from 'react';

const ExpYearInput = ({ id }) => {
  const inputRef = useRef(null);

  useEffect(() => {
    // 默认填充当前年份的后两位
    const currentYear = new Date().getFullYear().toString().slice(-2);
    if (inputRef.current) {
      inputRef.current.value = currentYear;
    }
  }, []);

  return (
    <InputField
        ref={inputRef}
        id={id}
        name={'YY'}
        label={'YY'}
        placeholder='YY'
        maxlength="2"
        pattern="\d{2}" 
        autoComplete='off' // 关闭浏览器自动填充
    />
  );
};

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