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