H5移動端底部input喚醒手機軟鍵盤遮擋輸入框問題解決辦法

<input type="text" value="" class="tinput"/>
 
//針對直接在瀏覽器打開此方法有效
 $('.tinput').bind('focus', function() {
            // 軟鍵盤彈起之後再調整滾動條位置
            if ($(this).offset().top > document.body.scrollHeight / 2) {
                setTimeout(function () {
                    window.scrollTo(0,document.body.scrollHeight);
                }, 500);
            }
 });
 
//針對嵌入app頁面用以下方法
$('.tinput').focus(function(e){
            var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
            if(isAndroid){
            $('body').height( $('body').height()+300)
            $('body').scrollTop(300)
            }
        })
        // 失去焦點時重新回到原來的狀態
        $('.tinput').blur(function(e){
            var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
            if(isAndroid){
            $('body').height( $('body').height()-300)
            $('body').scrollTop(0)
            }
        })
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章