如何阻止Chrome和Edge在非支付输入框显示已保存支付方式下拉列表

为什么Chrome/Edge会误判？ #

Chrome和Edge的自动填充机制会通过多维度识别字段用途，哪怕设置了autocomplete="off"也可能触发支付建议：

• 字段的name/id包含number、card、payment、expiry这类和支付沾边的关键词
• 字段类型设为type="number"，浏览器会默认关联信用卡号这类数字型支付字段
• 表单上下文里有其他支付相关字段，或者字段所在容器的class/id带支付类标识，被浏览器通过上下文关联识别

可行的解决方法 #

• 指定精准的autocomplete值：放弃"off"或自定义值，用浏览器认可的非支付类专属属性值，比如日期相关的autocomplete="bday-day"/bday-month，或者通用的autocomplete="one-time-code"，这类值会明确告诉浏览器字段用途，避免误判
• 修改字段名称和ID：彻底删除字段name、id里所有可能关联支付的关键词，比如把expiry-number改成date-part，payment-digit改成date-segment
• 调整字段类型+添加干扰隐藏字段：
  • 将type="number"改为type="text"，再用JS限制仅能输入数字，避开浏览器对数字字段的支付关联识别
  • 在目标字段前后添加隐藏的假支付字段，让浏览器优先识别这些无效字段，不再干扰真实日期字段：

    <input type="text" name="card_number" style="display: none;">
    <input type="text" name="expiry_date" style="display: none;">
    

• Razor Pages模型层调整：如果字段绑定了模型属性，修改模型的名称特性，避免后端生成的字段名带支付关键词：

  [DisplayName("日期分段")]
  [Name("date_segment")]
  public string DateSegment { get; set; }
  

• jQuery动态修正属性：如果无法直接修改HTML，在页面加载后用JS重置autocomplete属性：

  $(document).ready(function() {
    $('#target-date-field').attr('autocomplete', 'bday-day');
  });
  

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