搜尋

首頁  >  問答  >  主體

javascript - 如何讓行動網頁的輸入框固定在底部?

#如上圖展示,在首頁上使用者點選輸入框,彈出鍵盤,有時候會把輸入框部分遮擋住(如下圖)

#目前的處理方式是,當輸入框獲得焦點後,執行resize

$('input').on('focus' , function(){
    $(window).resize();
}).on('blur' , function() {
    $(window).resize();
});

這麼做就是為了重置視窗大小,讓原本浮動在底部的輸入框,重新定位
但是效果不太好,時而生效,時而失效

#像這樣的情況應該使用什麼方式來更好的處理這個問題?
還有在彈出鍵盤的同時,滾動頁面也能保持讓輸入區域固定在底部

目前輸入框的定位方式是:position:fixed
截圖環境:ios 微信端

仅有的幸福仅有的幸福2789 天前1088

全部回覆(5)我來回復

  • 阿神

    阿神2017-06-24 09:45:57

    輸入框 你可以用 flex 固定在底部試試,flex 固定到底部可查考 sticky-footer

    回覆
    0
  • 怪我咯

    怪我咯2017-06-24 09:45:57

    建議你用js去計算,用 window.innerHeight

    回覆
    0
  • 漂亮男人

    漂亮男人2017-06-24 09:45:57

    http://www.cnblogs.com/cococe...
    試試這個

    回覆
    0
  • 漂亮男人

    漂亮男人2017-06-24 09:45:57

    樓上說的對,可以用flex ,那些打廣告的都是採用這個屬性。我覺得這個能解決你的問題

    回覆
    0
  • PHP中文网

    PHP中文网2017-06-24 09:45:57

    網址:http://www.haorooms.com/post/...
    原理: ios 不要用 fixed,改使用 absolute。
    完。

    回覆
    0
  • 取消回覆