Background: H5 page on the micro-channel display, whether in pop or partial page at the bottom position ofinput
clicks of the keyboard input completion after completion, the bottom of the page to leave a blank question
The reason analysis
when the keyboard is lifted, window.scrollY will change from 0 to the height of the keyboard, so the solution is when the input loses focus, the window.scrollY reset height of the page before clicking (general window.scrollTo (0,1000000) can be solved in most cases)
Solution 1:
core code:
let currentY = 0;
focus(){
currentY = document.body.scrollTop
// write the following code for your business
}
onBlur(){
window.scrollTo(0,currentY)
// write the following code for your business
}
Solution 2:
Core code:
handleFocus(event) {
let e = event.currentTarget;
setTimeout(() => {
e.scrollIntoView({
block: 'start',
behavior: 'smooth'
});
}, 300);
}
handleblur() {
let e = event.currentTarget;
setTimeout(() => {
e.scrollIntoView({
block: 'end',
behavior: 'smooth'
});
}, 300);
window.scrollTo(0, 0);
}
解决键盘弹出后挡表单的问题
方法1:
$inputclears指input元素,$btnbox指包裹input的div
方法2:
window.addEventListener('resize', function() {
if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
window.setTimeout(function() {
if('scrollIntoView' in document.activeElement) {
document.activeElement.scrollIntoView();
} else {
document.activeElement.scrollIntoViewIfNeeded();
}
}, 0);
}
});
--------------------------------------
本文为博主原创文章,转载请附上博文链接!