如何移除Chrome中输入框自动填充时的DevTools提示

• 精准设置输入框属性组合
  Chrome的自动填充/上下文菜单有时候会无视常规设置，试试给输入框加上这些属性：

<input
  type="text"
  name="custom-address"
  autocomplete="none"
  autocorrect="off"
  autocapitalize="off"
  spellCheck="false"
  onClick={(e) => e.preventDefault()}
/>

autocomplete="none"比off的优先级更高，能避开部分浏览器的自动填充逻辑；加上autocorrect、autocapitalize、spellCheck可以阻止文本修正类菜单触发；onClick阻止默认行为能直接拦截点击时的浏览器上下文触发。

• 直接拦截上下文菜单事件
  如果点击后仍弹出菜单，给输入框加onContextMenu事件强制阻止：

<input
  type="text"
  name="address"
  onContextMenu={(e) => e.preventDefault()}
/>

这个方法能完全禁用输入框的所有上下文菜单，适合完全不需要右键菜单的场景。

• 伪装输入框类型（极端场景）
  要是前面的方法都没用，说明Chrome已经识别出这是地址类输入框，可以临时伪装输入类型：

import { useState } from 'react';

function AddressInput() {
  const [inputType, setInputType] = useState('tel');

  return (
    <input
      type={inputType}
      name="address"
      onFocus={() => setInputType('text')}
      autocomplete="none"
    />
  );
}

利用Chrome对不同输入类型的菜单逻辑差异，绕过地址识别，获得焦点后再恢复正常输入类型，不影响用户输入体验。

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