javascript - ios input聚焦時(shí),頁面整個(gè)被推上去了
問題描述
需求其實(shí)很簡(jiǎn)單。就是在頁面的底部固定一個(gè)input框,然后輸入文字就可以了。 可是。。。在ios系統(tǒng)下。當(dāng)這個(gè)input被聚焦時(shí),整個(gè)頁面都被頂上去了。。。。。。頭部的內(nèi)容都看不見了。請(qǐng)問各位有木有什么好辦法可以只讓這個(gè)input框被頂上去,頁面其他元素的位置不變？
tips:已經(jīng)在網(wǎng)上查了好多,可是都解決不了 T.T然后我試著干脆在input focus的時(shí)候把整個(gè)頁面的position改成fixed,top:0;bottom:0;然后這樣的話頁面確實(shí)沒有被頂上去了，可是input也不上去了，被那個(gè)鍵盤擋住了
<!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 id=’inp’><p class='content'> 內(nèi)容</p><p class='btm'> <input type='text'></p> </p> <script> </script></body></html>
問題解答
回答1：禁止input框獲取聚焦, 在點(diǎn)擊input后, 獲取keyboard彈出事件并且在keyboard上添加toolbar, 新建input框加入到toolbar上, 在鍵盤收回時(shí), 獲取到toolbar上的input框中內(nèi)容賦值到頁面input上.
當(dāng)input聚焦，把input改成fixed定位就可以了
position: fixed;bottom: 0;回答3：
這個(gè)問題還算好點(diǎn)，如果你的內(nèi)容有滾動(dòng)時(shí)候，在ios點(diǎn)擊fixed的input會(huì)發(fā)現(xiàn)跑到中間了。需要解決:
.wrap{ position:fixed; top:0; bottom: 0; left:0; overflow-y: scroll; width:100%; } <p id=’inp’> <p class='content'>內(nèi)容 </p></p><p class='btm'> <input type='text'></p>
讓內(nèi)容塊設(shè)置為fixed就好，目前樓主的問題，暫時(shí)沒有很好解決方案，提供個(gè)替代方案:footer里面不直接放input，而是一個(gè)偽input，點(diǎn)擊時(shí)彈出一個(gè)新層,如：http://zhibo.m.sohu.com/r/121...
網(wǎng)公網(wǎng)安備