如何正确禁用输入类型密码的自动完成功能

Question

您好，我正在实现 OTP 功能模式，该模式可以打开几次，一次是在您导航到应用程序时，然后是一些特定操作，例如单击某个操作按钮。

如果这很重要，我正在使用 Vue2 和 Buefy，所以问题是，一旦我提交代码并再次打开模式，它之前已经添加了填充的代码。我尝试将自动完成指定为one-time-code 或new-password，它们都不起作用。

这是我的实现

输入组件

<b-input
      :name="name"
      :value="value"
      :placeholder="placeholder"
      :disabled="disabled"
      :maxlength="maxLength"
      :type="type"
      :autocomplete="autocomplete"
      :inputmode="inputmode"
      @input="(value) => $emit('input', value)"
    >
 </b-input>

JS部分

export default {
  name: "Input",
  props: {
    name: String,
    label: String,
    placeholder: String,
    value: String,
    autocomplete: String,
    inputmode: {
      type: String,
      default: "text"
    },
    type: {
      type: String,
      default: "text"
    },
    disabled: {
      type: Boolean,
      default: false
    },
    maxLength: Number
  }
};

OTP 模式

<b-modal :active="isOpen" width="200" :can-cancel="canCancel">
    <div>
      <h2>Otp modal</h2>
      <Input
        label="Otp code"
        name="otp"
        v-model="code"
        placeholder="code"
        type="password"
        :maxLength="4"
        autocomplete="one-time-code"
        inputMode="numeric"
      />
      <slot></slot>
      <b-button type="is-primary" @click="close">Submit</b-button>
      <b-button type="is-primary is-light" @click="close">Close</b-button>
    </div>
 </b-modal>

可点击演示的 CodeSandbox：https://codesandbox.io/s/buefy-otp-test-onuh1

Answer 1

我认为你对这里发生的事情有点困惑——如果你没有正确设置 autocomplete，浏览器可能会自动填充你的 OTP，但这并不是导致你的数据保持不变的原因。我不知道为什么（我对 Buefy 不熟悉），但是即使您关闭了模态，您的 OTP 模态组件的状态也保持不变；浏览器在这里没有做错任何事情。

解决此问题的一种方法是使用 watcher 手动清除 OTP 代码。

这不是最干净的解决方案，添加太多观察者会很快使您的代码难以调试，但只使用一个应该不会造成伤害。

将此添加到您的 OtpModal 组件的 JavaScript 的末尾：

...
  watch: {
    isOpen() {
      this.code = "";
    }
  }
...

这将告诉 Vue 在isOpen 的值发生变化时清除code。

这是一个带有工作代码的 sn-p，您需要 open the snippet fullscreen 才能看到它。

（我删除了输入组件，因为它只是一个包装器，没有别的，如果它只是通过自身传递数据，你也不应该包含它）

Vue.config.productionTip = false;
Vue.config.devtools = false;

const OtpModal = {
  name: "otp-modal",
  template: `
  <b-modal :active="isOpen" width="200" :can-cancel="canCancel">
    <div>
      <h2>Otp modal</h2>
      <b-field>
        <b-input
          label="Otp code"
          name="otp"
          v-model="code"
          placeholder="code"
          type="password"
          :maxLength="4"
          autocomplete="one-time-code"
          inputMode="numeric"
        />
      </b-field>
      <slot></slot>
      <b-button type="is-primary" @click="close">Submit</b-button>
      <b-button type="is-primary is-light" @click="close">Close</b-button>
    </div>
  </b-modal>`,
  props: {
    isOpen: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      code: ""
    };
  },
  computed: {
    canCancel() {
      return ["escape", "x", "outside"];
    }
  },
  methods: {
    close() {
      this.$emit("close");
    }
  },
  watch: {
    isOpen() {
      this.code = "";
    }
  },
};

new Vue({
  name: 'main',
  el: '#app',
  components: {
    OtpModal,
  },
  data() {
    return {
      isModalOpen: false,
    };
  },
  methods: {
    toggleModal() {
      this.isModalOpen = !this.isModalOpen;
    },
    closeModal() {
      this.isModalOpen = false;
    },
  },
});

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

div {
  background-color: #ffffff;
  padding: 2rem;
}

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/buefy@0.9.7/dist/buefy.min.css">
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>

<div id="app">
  <b-button @click="toggleModal">Open modal</b-button>
  <otp-modal :is-open="isModalOpen" @close="closeModal">
    <p>Autocomplete isn't the problem afterall!</p>
  </otp-modal>
</div>

另外，为了确认，one-time-code 确实是valid autocomplete value，浏览器应该尊重它。 off 也是有效的，今天的浏览器也应该尊重这个值（然而，它们并不总是那么好）。