如何在C#/jQuery/JavaScript开发中禁用浏览器登录时的保存密码弹窗

目前主流浏览器对autocomplete="off"的兼容度有限，尤其是密码输入场景，多数浏览器会主动忽略该属性触发保存提示，以下是适配C#/jQuery/JavaScript开发场景的实测有效方案：

方案1：动态修改密码框type属性 #

核心原理是避开页面初始化时存在type="password"的输入框，让浏览器识别不到密码字段
代码示例：

<!-- 初始设置为text类型 -->
<input type="text" id="loginPwd" placeholder="请输入密码">
<form id="loginForm">
  <!-- 其他表单字段 -->
</form>

原生JavaScript实现：

// 聚焦时切换为密码类型
document.querySelector('#loginPwd').addEventListener('focus', function() {
  this.type = 'password'
})
// 表单提交后切回text类型，避免触发保存检测
document.querySelector('#loginForm').addEventListener('submit', function() {
  document.querySelector('#loginPwd').type = 'text'
})

jQuery实现：

$('#loginPwd').on('focus', function() {
  $(this).attr('type', 'password')
})
$('#loginForm').on('submit', function() {
  $('#loginPwd').attr('type', 'text')
})

方案2：添加隐藏诱饵输入框 #

核心原理是引导浏览器把自动填充逻辑指向隐藏的无效输入框，不触发真实字段的保存提示
代码示例：

<!-- 放在真实账号密码框之前，设置为隐藏 -->
<input type="text" style="display:none">
<input type="password" style="display:none">
<!-- 真实输入框建议搭配autocomplete="new-password"属性，兼容性更高 -->
<input type="text" name="username" placeholder="账号" autocomplete="new-password">
<input type="password" name="password" placeholder="密码" autocomplete="new-password">

如果是ASP.NET C#开发场景，可在后端给服务器控件添加对应属性：

// Page_Load事件中添加属性
usernameInput.Attributes.Add("autocomplete", "new-password");
pwdInput.Attributes.Add("autocomplete", "new-password");

方案3：异步提交表单，阻止默认提交行为 #

浏览器保存密码提示绝大多数是监听表单默认submit事件触发后弹出的，拦截默认提交行为可绕过检测
jQuery异步提交示例：

$('#loginForm').on('submit', function(e) {
  e.preventDefault() // 阻止默认表单提交
  const reqData = {
    username: $('input[name="username"]').val(),
    password: $('input[name="password"]').val()
  }
  // 调用C#后端登录接口
  $.post('/api/account/login', reqData, function(res) {
    if(res.success) {
      location.href = '/home'
    }
  })
  // 提交后清空密码字段，进一步避免触发保存
  $('input[name="password"]').val('')
})

注意事项 #

• 以上方案建议组合使用，可覆盖95%以上的主流浏览器场景
• 浏览器密码保存策略属于厂商自定义规则，不存在100%通用的全兼容方案，可根据目标用户的浏览器使用偏好调整实现逻辑

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