資訊專欄INFORMATION COLUMN
摘要：?jiǎn)栴}描述吸底的聚焦后，彈出的軟鍵盤將吸底的元素完全或者部分遮擋。然后導(dǎo)致元素被軟鍵盤遮擋高度為的高度。軟鍵盤的高度變化會(huì)觸發(fā)瀏覽器的事件。
移動(dòng)端做一個(gè)吸底的輸入框，首先需要注意兩大類設(shè)備，安卓和ios下的瀏覽器。特別是在ios下，輸入框聚焦時(shí)fixed定位會(huì)出現(xiàn)一些問題，網(wǎng)上也有許多相關(guān)的帖子，在此就不再贅述了。
今天要提及的是小米全面屏下的miui瀏覽器。
問題描述：吸底的input聚焦后，彈出的軟鍵盤將吸底的元素完全或者部分遮擋。
問題原因：當(dāng)input聚焦后，瀏覽器彈出軟鍵盤，然后將元素移動(dòng)到軟鍵盤上方，但全面屏下，miui瀏覽器少計(jì)算了瀏覽器自帶的底部bar的高度。然后導(dǎo)致元素被軟鍵盤遮擋高度為bar的高度。
解決方案：
1.獲取window.navigator.userAgent這一字段。
2.判斷是否含有"MiuiBrowser"這一字段。
3.判斷屏幕的寬高比，當(dāng)高度大于寬度的2倍時(shí)確定為全面屏。
4.記錄一開始進(jìn)入頁(yè)面時(shí)的高度：window.innerHeight。
5.當(dāng)輸入框聚焦后，給輸入框加上等于瀏覽器底部物理bar高度的margin-bottom。然后可以看到正常的輸入框了，而且不會(huì)被軟鍵盤遮擋。
6.軟鍵盤的高度變化會(huì)觸發(fā)瀏覽器的resize事件。第一次觸發(fā)底部輸入框聚焦時(shí)，記錄變化后的window.innerHeight。
7.由于軟鍵盤有收回這種狀態(tài)，此時(shí)軟鍵盤依然存在，但是高度縮小，同樣會(huì)觸發(fā)resize，此時(shí)可以用window.innerHeight與4中記錄的做比較，如果是小于等于4中的高度，而且大于5中記錄的高度，那么可以將輸入框的margin-bottom的增加值去掉，并且將輸入框blur。然后就不會(huì)露出很高的底部了。
以上。
建議：在移動(dòng)端最好不要做吸底的輸入框，各個(gè)瀏覽器的實(shí)現(xiàn)差距很大。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102273.html
摘要：?jiǎn)栴}描述吸底的聚焦后，彈出的軟鍵盤將吸底的元素完全或者部分遮擋。然后導(dǎo)致元素被軟鍵盤遮擋高度為的高度。軟鍵盤的高度變化會(huì)觸發(fā)瀏覽器的事件。 移動(dòng)端做一個(gè)吸底的輸入框，首先需要注意兩大類設(shè)備，安卓和ios下的瀏覽器。特別是在ios下，輸入框聚焦時(shí)fixed定位會(huì)出現(xiàn)一些問題，網(wǎng)上也有許多相關(guān)的帖子，在此就不再贅述了。今天要提及的是小米全面屏下的miui瀏覽器。問題描述：吸底的input聚...
摘要：然而，并沒有直接監(jiān)聽軟鍵盤的原生事件，只能通過軟鍵盤彈起或收起，引發(fā)頁(yè)面其他方面的表現(xiàn)間接監(jiān)聽，曲線救國(guó)。軟鍵盤收起表現(xiàn)觸發(fā)輸入框以外的區(qū)域時(shí)，輸入框失去焦點(diǎn)，軟鍵盤收起。可以讓軟鍵盤彈起后，讓焦點(diǎn)元素再次滾到可視區(qū)，強(qiáng)迫滾到位。 前言 最近一段時(shí)間在做 H5 聊天項(xiàng)目，踩過其中一大坑：輸入框獲取焦點(diǎn)，軟鍵盤彈起，要求輸入框吸附（或頂）在輸入法框上。需求很明確，看似很簡(jiǎn)單，其實(shí)不然。從...
閱讀 1356·2023-04-25 23:47
閱讀 931·2021-11-23 09:51
閱讀 4486·2021-09-26 10:17
閱讀 3735·2021-09-10 11:19
閱讀 3270·2021-09-06 15:10
閱讀 3558·2019-08-30 12:49
閱讀 2439·2019-08-29 13:20
閱讀 1743·2019-08-28 18:14
