问题一:安卓端input输入框会出现键盘弹出遮盖页面输入框的问题,input框无法自动出现在可视区。
在mounted里
mounted() {
window.addEventListener('resize', this.upForm)
}
methods: {
//对请求的数据格式化成页面需要的数据
upForm(time = 100) {
if (/iphone/i.test(navigator.userAgent)) {
// return
}
if (
document.activeElement.tagName === 'INPUT' ||
document.activeElement.tagName === 'TEXTAREA'
) {
setTimeout(() => {
document.activeElement.scrollIntoViewIfNeeded(true)
}, time)
}
// setTimeout(function() {
// e.target.scrollIntoView({
// block: "center",
// inline: "nearest",
// behavior: "smooth"
// });
// // true:元素的顶端将和其所在滚动区的可视区域的顶端对齐; false:底端对齐。
// }, 200);
},
},
问题二:安卓背景图会随着弹出软键盘上移
父级div--parent,子元素div--children
<div class="parent">
<div class="children"></div>
</div>
.parent {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
min-height: calc(100% + 1px);
background: url("./../assets/login/back_login.png") no-repeat center;
background-size: cover;
}
.children {
position: relative;
height: 100vh;
overflow-y: auto;
width: 100%;
}
问题三: ios键盘弹出后,在收起的时候底部出现非页面的空白区
<input
class="advice-input"
placeholder="请输入"
@blur.prevent="fixScroll"
v-model="changeAdvice"
/>
fixScroll() {
let u = navigator.userAgent;
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS) {
window.scrollTo(0, 0);
}
}