移動端頁面input輸入框被鍵盤遮擋問題

本文轉載自查看原文 2017-10-26 21:50 8686 input/ 鍵盤遮擋

<body class="layout-fixed">
    <!-- fixed定位的頭部 -->
    <header>
        
    </header>
    
    <!-- 可以滾動的區域 -->
    <main>
        <!-- 內容在這里... -->
    </main>
    
    <!-- fixed定位的底部 -->
    <footer>
        <input type="text" placeholder="Footer..."/>
        <button class="submit">提交</button>
    </footer>
</body>v

header, footer, main {
    display: block;
}
header {
    position: fixed;
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
}
footer {
    position: fixed;
    height: 34px;
    left: 0;
    right: 0;
    bottom: 0;
}
main {
    margin-top: 50px;
    margin-bottom: 34px;
    height: 2000px
}

下面這個樣子。

鍵盤喚起下面這樣

是為什么呢？： 軟鍵盤喚起后，頁面的 fixed 元素將失效（即無法浮動，也可理解為成了 absolute 定位）

解決方案: 將原 body 滾動的區域域移到 main 內部

header, footer, main {
    display: block;
}
header {
    position: fixed;
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
}
footer {
    position: fixed;
    height: 34px;
    left: 0;
    right: 0;
    bottom: 0;
}
main {
    /* main絕對定位，進行內部滾動 */
    position: absolute;
    top: 50px;
    bottom: 34px;
    /* 使之可以滾動 */
    overflow-y: scroll;
　　/* 增加該屬性，可以增加彈性 */
　　-webkit-overflow-scrolling: touch;
}
main .content {
    height: 2000px;

h5底部輸入框被鍵盤遮擋問題

var oHeight = $(document).height(); //瀏覽器當前的高度   
   $(window).resize(function(){
 
        if($(document).height() < oHeight){
         
        $("#footer").css("position","static");
    }else{
         
        $("#footer").css("position","absolute");
    }
        
   });

js解決軟鍵盤遮擋輸入框問題

鏈接 http://blog.csdn.net/u011500781/article/details/53926425

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 [javascript] 解決移動端手機瀏覽器軟鍵盤遮擋輸入框問題安卓設備輸入框聚焦出現軟鍵盤時input框被遮擋問題移動端輸入框固定在底部鍵盤抬起時遮擋住輸入框隨時監測屏幕大小，解決手機端小鍵盤遮擋輸入框問題 Android input輸入框移動頁面input手機鍵盤中的“搜索”按鍵移動端iOS中input輸入框搜索框軟鍵盤出現換行而不是搜索 ios端 input輸入框遮擋問題解決 React-native鍵盤遮擋輸入框問題的解決移動端 input 輸入框實現自帶鍵盤“搜索“功能並修改X 關於ios鍵盤遮擋輸入框