入力の下端を移動すると、完全なH5入力空白ページの問題です

背景：H5マイクロチャネルディスプレイ上のページ、下部にPOPまたは部分ページ内かどうかの位置をinput完了した後キーボード入力完了のクリック、ブランク質問を残すページの底部

理由の分析
　　キーボードを持ち上げた時にソリューションが入力フォーカスを失ったとき、window.scrollYは（一般的なwindow.scrollToはをクリックする前に、ページの高さをリセットしているので、window.scrollYは、キーボードの高さに0から変更されます（0,1000000））は、ほとんどの場合、解決することができます

解決策1：
　　コアコード：

　　currentY = 0ましょう。

　　フォーカス（）{

　　　　currentY = document.body.scrollTop

　　　　//あなたのビジネスのために、次のコードを記述

　　}

 

　　onBlurイベント（）{

　　　　window.scrollToは（0、currentY）　

　　　　//あなたのビジネスのために、次のコードを記述

　　}

解決策2：

　　コアコード：

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

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