1. 首页
  2. IT资讯

IE浏览器记住密码功能与Vue的数据绑定不响应

记一个bug

有图有真相:

IE浏览器记住密码功能与Vue的数据绑定不响应

页面代码: Vue-cli初始化的项目.

<template>   <div class="hello">       <div>         <span>用户名</span>         <input class='acc' v-model='acc' type="text">       </div>       <div>         <span>密码</span>         <input class='pwd v-model='pwd' type="password">       </div>       <div>         <button @click='login'>登录</button>       </div>   </div> </template>  <script> import md5 from 'js-md5' export default {   name: 'HelloWorld',   data () {     return {       acc: '',       pwd: ''     }   },   props: {     msg: String   },   methods: {     login () {       if (!this.acc) {         alert('请输入用户名')         return       }       if (!this.pwd) {         alert('请输入密码')         return;       }       this.$ajax.post('http://ip:port/api/UserInfo/Login', {         name: this.acc,         password: md5(this.pwd)       })       .then(res => {         this.$router.push({           name: 'about'         })       })     }   } } </script>  <!-- Add "scoped" attribute to limit CSS to this component only --> <style> div{   width: 340px;   margin: 0 auto;   margin-top: 12px;  } span{   width: 80px;   text-align: right;   margin-right: 10px;   display: inline-block; } input{   outline: none;   padding-left:12px;   box-sizing: border-box;   width:240px;   height:40px;   border-radius: 5px;   border:1px solid #20b1aa; } button{   width:300px;   height: 40px;   border-radius: 5px;   background-color: #20b1aa;   color: #fff;   border:none;   float: right;   cursor: pointer; } </style> 

问题所在:

在IE内核的浏览器(IE浏览器, 360浏览器的IE模式)上测试Vue项目,

在登录界面, 如果第一次登录成功后, 选择了记住密码.

再次进入登录页界面时, 用户名密码自动填充.

但此时填充的值, 并不会响应到Vue组件内的变量上,

就导致了提示输入用户名的弹框.

一个解决措施:

原生js获取输入框内的值, 如果存在, 手动赋值给Vue的变量.

let accValue = document.getElementsByClassName('acc')[0].value let pwdcValue = document.getElementsByClassName('pwd')[0].value accValue ? this.acc = accValue : '' pwdcValue ? this.pwd = pwdcValue : '' 

另一个解决措施:

直接使用原生js判断,两个输入框的值, 登录时也不多, 账户名密码.

methods: {   login () {       let accValue = document.getElementsByClassName('acc')[0].value       let pwdcValue = document.getElementsByClassName('pwd')[0].value       if (!accValue) {         alert('请输入用户名')         return       }       if (!pwdcValue) {         alert('请输入密码')         return;       }       this.$ajax.post('http://ip:port/api/UserInfo/Login', {         name: accValue,         password: md5(pwdcValue)       })       .then(res => {         this.$router.push({           name: 'about'         })       })     } } 

另外还需注意记住密码情况下, 输入框的背景颜色.

在谷歌浏览器上, 记住密码的输入框的背景颜色会变成白色,

所以输入框内文字不能是白色, 否则看不到文字.

在IE内核浏览器上, 机制密码的输入框的背景颜色会变成黄色.

所以输入框内的文字不能是黄, 否则看不到文字.

原文始发于:IE浏览器记住密码功能与Vue的数据绑定不响应

主题测试文章,只做测试使用。发布者:酒颂,转转请注明出处:http://www.cxybcw.com/23881.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code