简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - ios input聚焦時,頁面整個被推上去了
淡淡烟草味
淡淡烟草味 2017-07-04 13:45:35
0
3
1373

需求其實很簡單。就是在頁面的底部固定一個input框,然後輸入文字就可以了。
可是。 。 。在ios系統下。當這個input被聚焦時,整個頁面都被頂上去了。 。 。 。 。 。頭部的內容都看不見了。
請問各位有木頭有什麼好方法可以只讓這個input框被頂上去,頁面其他元素的位置不變？

tips:已經在網上查了很多,可是都解決不了T.T
然後我試著乾脆在input focus的時候把整個頁面的position改成fixed,top:0;bottom:0;然後這樣的話頁面確實沒有被頂上去了，可是input也不上去了，被那個鍵盤擋住了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scroll</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<style>
   .btm{
       position: fixed ;
       bottom:0;
   }

</style>
</head>
<body>
    <p class="wrap" id='inp'>
        <p class="content">
            内容
        </p>
        <p class="btm">
            <input type="text">
        </p>
    </p>
    <script>
    </script>
</body>
</html>
淡淡烟草味
淡淡烟草味

全部回覆(3)
習慣沉默
習慣沉默2017-07-04 13:47:35 3樓

禁止input框獲取聚焦, 在點擊input後, 獲取keyboard彈出事件並且在keyboard上添加toolbar, 到鍵盤取得toolbar上的input框中內容賦值到頁面input上.

點贊 +0
新增回覆
淡淡烟草味
淡淡烟草味2017-07-04 13:47:35 2樓

當input聚焦，把input改成fixed定位就可以了

position: fixed;
bottom: 0;
點贊 +0
新增回覆
三叔
三叔2017-07-04 13:47:35 1樓

這個問題還算好點，如果你的內容有滾動時候，在ios點擊fixed的input會發現跑到中間了。
需要解決:

.wrap{
    position:fixed;
    top:0;
    bottom: 0;
    left:0;
    overflow-y: scroll;
    width:100%;
   }
 <p class="wrap" id='inp'>
    <p class="content">
        内容
    </p>
</p>
<p class="btm">
    <input type="text">
</p>

讓內容塊設定為fixed就好，目前樓主的問題，暫時沒有很好解決方案，提供個替代方案:footer裡面不直接放input，而是一個偽input，點擊時彈出一個新層,如：http ://zhibo.m.sohu.com/r/121...

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！