为什么浏览器记住密码会影响表单?

用户登录时,用户往往会选择记住密码，由于浏览器自身的问题，当表单中输入框类型为password时，该输入框会有历史记录。效果如下：

原先的代码：

<el-row v-if="dialogStatus==='update'?false:true" type="flex" class="row-bg">
  <el-col :span="12">
    <el-form-item label="账户密码:" prop="password">
      <el-input v-model="edit.password" type="password" clearable prop="password"/>
    </el-form-item>
  </el-col>
</el-row>
<el-row type="flex" class="row-bg">
  <el-col :span="12">
    <el-form-item v-if="dialogStatus==='update'?false:true" label="确认密码:" prop="checkPassword">
      <el-input v-model="edit.checkPassword" type="password" clearable prop="registeredAddress"/>
    </el-form-item>
  </el-col>
</el-row>

修改后的代码：

<el-row v-if="dialogStatus==='update'?false:true" type="flex" class="row-bg">
  <el-col :span="12">
    <el-form-item label="账户密码:" prop="password">
      <el-input id="pwd" type="password" readonly="true" style="display:none"/>
      <el-input id="hidePwd" v-model="edit.password" type="text" clearable/>
    </el-form-item>
  </el-col>
</el-row>
<el-row type="flex" class="row-bg">
  <el-col :span="12">
    <el-form-item v-if="dialogStatus==='update'?false:true" label="确认密码:" prop="checkPassword">
      <el-input id="pwd" type="password" readonly="true" style="display:none"/>
      <el-input id="hidePwd" v-model="edit.checkPassword" type="text" clearable prop="registeredAddress"/>

    </el-form-item>
  </el-col>
</el-row>

还需要结合js来处理：即隐藏type为text的输入框，显示type为password的输入框并获取焦点

openCreateDialog() {
  // 浏览器记住密码会影响表单
  $('#hidePwd').on('focus', function() {
    // 当前文本框隐藏
    $(this).hide()
    // 隐藏的密码框显示并且获取焦点 只读属性去掉
    $('#pwd').show().attr('readonly', false).focus()
  })
  this.userEnterpriseId = this.enterpriseId
  // console.log(this.userEnterpriseId)
  this.resetTemp()
  this.roleShow()
  this.dialogFormVisible = true
  this.disabled = false
  this.dialogStatus = 'create'
  const userType = this.edit.userType
  this.$nextTick(() => {
    this.$refs['from'].clearValidate()
    this.userTypeChange(userType)
  })
},