Material UI Input组件autocomplete=off失效 求有效解决方案

方案1：使用浏览器不识别的自定义autocomplete值 #

部分浏览器会忽略off，可以用自定义字符串或针对密码字段的特殊值，同时在组件和InputProps中双重设置：

import Input from '@mui/material/Input';

// 普通输入框
<Input
  autoComplete="nope"
  InputProps={{
    autocomplete: 'nope'
  }}
/>

// 密码输入框（效果更稳定）
<Input
  type="password"
  autoComplete="new-password"
  InputProps={{
    autocomplete: 'new-password'
  }}
/>

方案2：添加隐藏的假输入框 #

在真实输入框前放置两个隐藏的、带有常见自动填充字段名的输入框，让浏览器优先填充这些无意义的假框：

<div style={{ position: 'absolute', left: '-9999px' }}>
  <input type="text" name="username" />
  <input type="password" name="password" />
</div>

<Input
  name="actual-username"
  autoComplete="off"
/>
<Input
  type="password"
  name="actual-password"
  autoComplete="off"
/>

方案3：结合readOnly与聚焦事件 #

初始设置输入框为只读状态，用户聚焦时取消只读，避免浏览器提前填充：

import { useState } from 'react';
import Input from '@mui/material/Input';

const NoAutoFillInput = () => {
  const [isReadOnly, setIsReadOnly] = useState(true);

  return (
    <Input
      readOnly={isReadOnly}
      onFocus={() => setIsReadOnly(false)}
      onBlur={() => setIsReadOnly(true)}
      autoComplete="off"
      InputProps={{ autocomplete: 'off' }}
    />
  );
};

方案4：优化随机字段名方案 #

你之前的随机字段名导致无法输入，大概率是状态绑定逻辑问题，可参考以下写法保证输入正常：

import { useState, useEffect } from 'react';
import Input from '@mui/material/Input';

const RandomNameInput = () => {
  const [inputValue, setInputValue] = useState('');
  const [randomName, setRandomName] = useState('');

  useEffect(() => {
    setRandomName(`input-${Math.random().toString(36).slice(2, 10)}`);
  }, []);

  return (
    <Input
      name={randomName}
      id={randomName}
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
      autoComplete="off"
    />
  );
};

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