Moving the bottom end of the input is complete H5 input blank page problem

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

$inputclears.on('focus', function(){

　　$btnbox.css('position', 'static')

}).on('blur', function(e){

　　$btnbox.css('position', 'fixed')

})

方法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);
　　}
});

--------------------------------------
本文为博主原创文章，转载请附上博文链接！