Heim > Web-Frontend > js-Tutorial > So überwachen Sie das Auf- und Einfahren der mobilen Tastatur im Winkel

So überwachen Sie das Auf- und Einfahren der mobilen Tastatur im Winkel

一个新手
Freigeben: 2017-09-29 09:37:10
Original
2442 Leute haben es durchsucht
页面的提交按钮采用的是固定定位在页面的底部,键盘弹出后,提交按钮紧挨着键盘的上方,
输入框获得焦点后,键盘弹出,并且输入框回自动定位上方的空白处,
此时由于键盘上方固定定位的提交按钮的原因有可能会遮挡住获得焦点的输入框,
从而导致用户看不见输入框,需要用户手动滑动屏幕,移动输入框的位置,才可以进行输入内容。

解决办法:
  1.监听window的大小的变化,来判断键盘的弹出和收回
  2.获取输入框底部的偏移位置,即输入框底部距离可见区域上面的距离A==输入框.offsetTop-屏幕卷起的高度
   3.获得可见区间的高度B==window.height-提交按钮的高度
    4.将AB进行比较,调整屏幕滚动的距离,从而将输入框定位到可见区域的位置,让用户可以输入
Nach dem Login kopieren
    ps:如果页面当中有很多个输入框,判断什么时候进行手动设置屏幕滚动的距离
Nach dem Login kopieren
window.height-提交按钮的高度>输入框底部距离可见区域上面的距离A>输入框底部距离可见区域上面的距离A在这个范围内  都需要手动操作屏幕卷起的高度   差值==输入框底部距离可见区域上面的距离A-(window.height-提交按钮的高度)
Nach dem Login kopieren
$scope.$watch(function(){
    return $window.innerHeight;
}, function(value) {
    if(value< me.winH){
        setTimeout(function(){
            var scrollTop=parseInt($(".consultApplyScroll .scroll").css("transform").split(",")[1].slice(0,-2));
            var offsetTop=$("#confirmedDate")[0].offsetTop;
            var sub=((offsetTop+scrollTop)-(value-44));
            var inputH=$(&#39;.textarea&#39;).eq(1).height();
            sub=sub>0&&(offsetTop+scrollTop)>(value-44)&&(offsetTop+scrollTop)<(value+inputH)?sub:0;
            var valuescrollTop=scrollTop-sub;
             $(".consultApplyScroll .scroll")[0].style.webkitTransform="translate(0px,"+valuescrollTop+"px) scale(1) translateZ(0px)";
        },500);
    }else{
        $sys.getScroll("consultApplyScroll").resize();
    }
});
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo überwachen Sie das Auf- und Einfahren der mobilen Tastatur im Winkel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage