Element中el-input密码输入框浏览器自动填充账号密码问题的解决方法

当使用Element的<el-input>组件创建密码输入框时，会遇到浏览器自动填充账号密码的问题。这个问题可能会影响页面的安全性，同时给用户带来不便。本文将详细讲解如何解决这个问题。

问题的产生

浏览器在填充表单的时候，会检测该表单是否具有自动填充的特性。在密码输入框中，如果同时存在一个隐藏的<input>元素，并且该元素的名称为username或email或tel等浏览器默认使用的表单字段名称，那么浏览器会自动将对应的账号填充到该元素中。

因此，在使用Element的密码输入框时，由于该组件内部使用的就是一个<input>元素，因此浏览器会将密码自动填充到该元素中，从而导致了问题的产生。

解决方法

方法一：自定义v-model

为了解决这个问题，我们可以自定义<el-input>的v-model属性，让它不与原生的<input>元素的value属性进行双向绑定。这个方法的具体步骤如下：

1. 在父组件中，定义一个新的变量password，并绑定到<el-input>的v-model上。

```html

```

1. 在<el-input>中设置value属性为password。

```html

```

这样，<el-input>的v-model绑定的是password变量，在浏览器自动填充表单时不会自动填充到<input>元素中，而是保存在password变量中。

方法二：设置autocomplete属性

另一种解决方法是设置<el-input>的autocomplete属性为off。这个属性可以禁止浏览器在该表单中填充默认值。具体操作如下：

<template>
  <el-input :autocomplete="'off'" type="password"></el-input>
</template>

这种方法比较简单，只需要在<el-input>中设置autocomplete属性即可。但需要注意的是，这种方法只能设置整个表单的autocomplete属性，不能单独为某个字段设置，可能会对其他表单的填充造成影响。

示例说明

下面我们分别通过两个示例来详细说明上述两种解决方法的具体操作。

示例一：自定义v-model

<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="密码">
        <my-password v-model="form.password"></my-password>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import MyPassword from './MyPassword.vue';

export default {
  components: {
    MyPassword
  },
  data() {
    return {
      form: {
        password: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      alert('您输入的密码是：' + this.form.password);
    }
  }
}
</script>

在上述示例中，我们自定义了一个<my-password>组件，该组件与原生的<el-input>组件非常类似，只是将v-model属性改成了password，并将<input>元素的值绑定到了password变量上。这样，在浏览器自动填充账号密码时，只会填充到隐藏的<input>元素中，不会对页面带来安全隐患。

示例二：设置autocomplete属性

<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="form.username" :autocomplete="'username'"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" :autocomplete="'off'" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      alert('您输入的用户名是：' + this.form.username + '，密码是：' + this.form.password);
    }
  }
}
</script>

在上述示例中，我们设置了<el-input>的autocomplete属性为off，以禁止浏览器自动填充表单。这种方法虽然比较简单，但是需要在整个表单中设置，可能会对其他表单的填充造成影响，需要慎重使用。