这是我参与8月更文挑战的第5天,活动详情查看:8月更文挑战
查资料的各种解决办法
比如:
- 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 onfocus="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文档