hugh 的个人博客

1. 场景

在登录时， 我们需要自动填写， 可以提高用户体验， 但是有些常见，如修改密码、更改绑定手机等功能，就不能自动填写， 因为我们需要保证账号的安全性

 

2. 如何取消自动填写

浏览器根据输入框类型 和 域名确认是否有保存的账号密码

基于此，我们可以使用以下方式操作

a. 使用autocomplete ="new-password"

A new password. When creating a new account or changing passwords, this should be used for an "Enter your new password" or "Confirm new password" field, as opposed to a general "Enter your current password" field that might be present. This may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password (see also Preventing autofilling with autocomplete="new-password").【详情】

b. 以上方式不是所有浏览器都支持的， chrome显示支持，但是实测并没有生效，可以结合下面的代码

<input type="password" style="display: none">

 

完整按理如下（基于ko）：

<template>
  <div data-bind="css: params.containerCss">
    <!-- ko if: params.closeAutoComplete-->
      <input type="password" style="display: none">
    <!-- /ko -->
    <input type="password" autocomplete="off"
           data-bind='attr:{placeHolder: i18n.prop(params.placeHolder), name: params.name, autocomplete: needAutoComplete}, value: value, css: {"has-error": notValid()}'/>
    <!-- ko if: !params.hiddenError && notValid() -->
    <p class="error-msg" data-bind="html: i18n.prop(notValid())"></p>
    <!-- /ko -->
  </div>
</template>
<script>
define(["jquery", "knockout", "ko_validation", "state", "BaseInput"], function ($, ko, v, state, BaseInput) {
/**
 * pop password输入框
 */
class PopPassword extends BaseInput {
  constructor(params, components) {
    super(params, components, "input");
    params = params || {};
    this.i18n = state.page().i18n;
    this.params = params;
    this.needAutoComplete = !params.closeAutoComplete ? "on" : "new-password"
  }
}

return {
  viewModel: PopPassword
}

})
</script>