-
今天在公司的项目中，突然遇到了input框，点击及失去焦点的时候，在安卓手机和ios手机上遇到的不同的问题，经过大量的百度，找到如下方法，希望也能帮助你们解决问题！(vue的写法），如果在Java中配合vue，那么vue的聚焦事件和失去焦点的事件没有进行触发，使用监听的方法就可以了
- vue写法
<input type="email" name="email" placeholder="Enter here" v-model="user_email"
maxlength="20" @blur="blur" ref="input" @focus="focus">
focus(){//获取焦点的时候进行触发
window.addEventListener('resize', () => {
if (document.activeElement.tagName == 'INPUT') {
window.setTimeout(() => { document.activeElement.scrollIntoViewIfNeeded();
}, 100);
}
})
},
blur(){//失去焦点的时候，进行触发
var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
this.$refs.input.scrollIntoView(false);
}else{
window.scroll(0, 0);//苹果
}
}
- js的原声写法
<input type="email" name="email" placeholder="Enter here" v-model="user_email"
maxlength="20" id="email">
//获取焦点的时候
document.getElementById("email").addEventListener("focus",()=>{
window.addEventListener('resize', () => {
if (document.activeElement.tagName == 'INPUT') {
window.setTimeout(() => { document.activeElement.scrollIntoViewIfNeeded();
}, 100);
}
})
})
//失去焦点的时候
document.getElementById("email").addEventListener("blur",()=>{
var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
this.$refs.input.scrollIntoView(false);
}else{
window.scroll(0, 0);//苹果
}
})
- 新的补充，使用vue做的h5页面在微信中打开，当input失去焦点的时候，不点击软键盘关闭，而是点击其他的地方，软键盘关闭，页面底部还是留白，没有下去,在失去焦点的事件中，将下方的代码放上就可以了
document.getElementById("email").addEventListener("blur",()=>{
var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
setTimeout(function () {
document.getElementsByTagName("body")[0].style.height = document.body.scrollHeight+"px";
document.getElementsByTagName("body")[0].style.width = document.body.scrollWidth+"px";
},100)
}else{
window.scroll(0, 0);//苹果
}
})
-
记录input框在小米手机原生浏览器中被软键盘覆盖的bug？
*首先这个问题当时大量的进行了百度，看了大多数人写的，都是通过软键盘弹起的时候，会改变页面的大小，触发resize，只要进行监听resize就可以了，软键盘弹起的时候，我们可以进行一些操作，百度上都有，但是小米的原生浏览器上不触发resize,此时百度上的一些方法都不好使了，最终使用了一种最笨的办法，就是用户点击input框聚焦的时候，那么给底部加上margin或者padding进行顶上去，失去焦点的时候将我们加上的padding和margin取消掉，（有个缺陷，点击软键盘上的隐藏，那么就会显示底部顶上来多余的空白，监听不到），最后为了用户的体验更好一点，我是每个input聚焦的时候，加上了不同的padding或者margin，让input框刚好到软键盘的上面（由于不同的手机，软键盘的高度是不同的，这里只做了一个软键盘弹出最高的进行一一调试），点击聚焦的时候，还让页面自动进行滚动到顶部，直接scrollTop=1000;因为每个input就加了一点margin或者是padding，所以会自动滚动到底部就不会在进行滚动了。
