Chrome谷歌浏览器记住密码的背景色修改

查资料的各种解决办法

比如：
autocomplete=“off”
autocomplete=“new-password”
……
等等等我这里都用不上！！！因为我需要满足如下要求：
1、必须要记住密码这个功能
2、背景色尽量透明
3、提示“账号”需要在input框内，输入内容时移动至框的上部分

试探方法一

input {
	-webkit-box-shadow: 0 0 0px 1000px rgba(24, 130, 168, 1) inset;
	-webkit-text-fill-color: #00c0ff;
}

但是这里设置了以后，我的“账号”提示会被遮挡，如果直接调整内阴影的透明度，黄色的背景色又会出来。
所以思考，在input框有内容时加上内阴影，在input框为空时去掉该样式，所以修改为如下：

试探方法二

<input type="text" :class="{coverShadow: coverUser}" v-model="username" @keyup.enter="loginMethod()">

data () {
    return {
      username: '',
      coverUser: false
    }
},
watch: {
    username (val) {
      if (val === '') {
        this.coverUser = false
      } else {
        this.coverUser = true
      }
    }
}

问题又来了：
在谷歌浏览器下，有时候页面加载完，填入了用户名，但是username获取不到改变，需要任意点击屏幕或按任意键，才能触发watch里username。
也就是说不知道谷歌合适填入的用户名，vue这边监控不到，很奇怪，不知道为啥，求解。。。
思考了一下有三个方案：
1、初始化完成后，模拟触发鼠标点击事件或者键盘事件，经测试，这个不行，即便延迟自动触发点击事件，console.log(11111)打印出来了，谷歌填入的用户名密码黄色背景仍不消失，也就是同样的道理有时候根本获取不到username。
2、初始化完成后，聚焦当前input框，经测试，这个也不行，偶尔会出现光标先focus然后谷歌才填入用户名密码。
3、使input只读，当光标聚焦时去掉已读属性，这个导致记住密码需要选择对应用户才可以。

方案一

<div id="test" @click="test()">

test () {
	console.log(11111)
}

setTimeout(function () {
	let node = document.getElementById('test') // dom节点
	if (MouseEvent) {
	  // Up-to-date approach
	  let mevt = new MouseEvent('click', {
		view: window,
		bubbles: false,
		cancelable: true
	  })
	  node.dispatchEvent(mevt)
	} else if (document.createEvent) {
	  let evt = document.createEvent('MouseEvents')
	  evt.initEvent('click', false, false)
	  node.dispatchEvent(evt)
	} else if (document.createEventObject) {
	  node.fireEvent('onclick')
	} else if (typeof node.onclick === 'function') {
	  node.onclick()
	}
}, 2600)

方案二

<input type="text" class="styled-input__input" :class="{coverShadow: coverUser}" v-model="username" @keyup.enter="loginMethod()" autofocus>
data () {
    return {
      username: '',
      coverUser: false
    }
},
watch: {
    username (val) {
      if (val === '') {
        this.coverUser = false
      } else {
        this.coverUser = true
      }
    }
}

另外：
若在加载完成后触发，document.querySelectorAll(’.styled-input__input’).focus() 没用，无法聚焦光标。
若使用document.getElementById，但凡给input加了id，谷歌的记住密码又失效了。
综上H5下添加autofocus即可。

方案三

<input type="text" :class="{coverShadow: coverUser}" v-model="username" @keyup.enter="loginMethod()" readonly onfocus="this.removeAttribute('readonly')">
data () {
    return {
      username: '',
      coverUser: false
    }
},
watch: {
    username (val) {
      if (val === '') {
        this.coverUser = false
      } else {
        this.coverUser = true
      }
    }
}

总结

个人推荐方案三。
但是最近发现好像还是有问题啊……折腾了半天无解……待续

---

附加（折腾过程中遇到的其他问题）

IE下input标签文字无法显示

1、首先确定文字输入了，能console出来内容。
2、给input框加border，确认显示在表层。
3、调试模式下看一下盒子模型！！！我走了多少弯路才走到这里，不看不知道，一看：
高度为0？谷歌为啥能正常显示IE就不行了？不对我设置了高度啊？
仔细一看自己设置的啥：

.styled-input__input {
  ……
  padding: 18px 15px;
  height: 10px;
  margin: 10px 0px;
}

高度10，内边距上下都18，那哪里有空间显示文字啊！改为下面就好了。

.styled-input__input {
  ……
  padding: 0px 15px;
  height: 30px;
  margin: 10px 0px;
}

IE不支持的那些东西

IE不支持margin:auto显示居中，通过外层text-align: center;代替本层的margin:auto解决。
IE不支持SVG animation，费解，网上说的去掉stroke-miterlimi ，stroke-width<="6"并没有用。
IE的input输入框，有属性readonly οnfοcus="this.removeAttribute(‘readonly’)"时，鼠标需要点击两次对话框才能正常输入。
IE的input输入框，有属性:autofocus=“true”，光标出现过早。
IE9浏览器中文显示乱码，需要在网页空白处右键-编码UTF8即可。

IE浏览器缓存GET请求

问题：
IE浏览器执行增删改后，点击查询，发现列表始终保持原来的查询结果。其他浏览器不存在此现象。
原因：
因为GET请求地址、参数均一致，IE浏览器缓存了GET请求。
解决：
给GET请求添加参数（时间戳），改变每次请求的url，这样就能获取服务器最新的数据内容。

// get请求
export const axiosGet = (url, params, callback) => {
  let newParams = params
  if (newParams === null) {
    newParams = {}
  }
  // 为了清除IE浏览器缓存get请求，给每一个get请求带上一个时间戳参数
  newParams['forIE'] = new Date().getTime()
  return axios.get(url, {
    params: newParams
  })
    .then(res => {
    })
    .catch(res => {
      console.log(res, 'get请求出错！')
    })
}

搜狗浏览器VS火狐浏览器

搜狗浏览器不支持3D模型展示
火狐浏览器自带pdf.js优化了在线打开pdf文档