移動端ios 輸入框fixed固定在底部 焦點時亂跳加遮蓋問題的解決 轉自zhangyunling 加個人項目解決方案


如果您有過移動端的開發經驗,那么您是否碰到過這樣的問題,一個頁面有輸入框,當這個輸入框聚焦時,輸入框在IOS下,被移動到手機屏幕的當中去了,而在Android端,有些瀏覽器的輸入框,會被鍵盤蓋住。

1:前言

接下來就以最常見的頂部和底部固定輸入框來看一下,問題的來源,以及折中的解決方案

輸入區域,在移動端基本上,只用於三種情況

1:固定在頂部的

2:固定在底部的

3:在文檔流中的

我們這里,首先以固定在頂部和底部的為例,來看看它的一些表現。

而這里的問題展示,也是通過一些示例來展示,而在每個示例中,都是使用的最簡單的元素,最簡單的布局,來展示這個問題

2:文檔高度沒有超過一屏

大部分的頂部輸入框,出現的情況都是不會超過一屏的,如果超過一屏,那么大部分的處理方式就是,這個頂部的輸入框是在文檔流內部的,不是一直固定在頁面頂部的,而當輸入框點擊之后,直接跳轉到一個單獨的搜索頁,而搜索頁的內容,一般都是不太多的,基本只包含一些提示信息,並且,在搜索頁的輸入框,也不是那種固定在頂部的。就比如流量那么大的“淘寶的H5頁面”;

這里加一句題外話,其實在移動端的布局中,已經很少有局部是固定布局的了,尤其是一些不常用的功能,原因可以想象為,移動端的可視區域就那么一些,如果很多元素采用了固定布局,那么有效的內容元素,可以展現的就更少了,所以一般除非必要,是不會出現固定布局這樣的情況的?

扯了那么多,接下來就先看看示例吧

如果您在PC端,想要移動端測試一下,請掃碼:

如果您在移動端,或者在PC端,想要看下源代碼:滾動區域,不大於一屏的DEMO

我個人有在IOS下,和Android下測試一下,結果如下:

上輸入框,在IOSAndroid下,都正常

下輸入框,在IOS下,會彈到鍵盤上面,雖不是緊挨着鍵盤,但是情況可以接受。

下輸入框,在Android的某些瀏覽器下,會被蓋住,在大部分瀏覽器下,都是緊挨着鍵盤的

3:文檔高度超過一屏

有時候,會有這么一種情況,我固定在頂部和底部的輸入框,就是需要在一個很大的頁面中,有一個固定在頂部或者是底部的輸入框,比如一些實時聊天的界面,或者是彈幕交互的界面。

但是呢,除了這些固定之后,其他的一些元素,是占據了很大文檔空間的,就是說,其他的元素高度,是超過一屏的高度的,所以來看看這個時候的情況:

如果您在PC端,想要移動端測試一下,請掃碼:

如果您在移動端,或者在PC端,想要看下源代碼:滾動區域,大於一屏的DEMO

該情況,如果您是Android機的話,這里可以不做測試,因為其展示形式,和文檔不超過一屏的展示形式,基本一樣的,該出什么問題,還是有什么問題,這里主要是IOS下的問題,而且問題非常嚴重。

如果您沒有發現問題,那么就把頁面滾動到最底部的時候,點擊頂部的輸入框,把頁面滾動到最頂部的時候,點擊固定在底部的輸入框,就可以看到問題了。

我看到的結果,可以描述如下:

Android:上輸入框表現正常,下輸入框:相同的問題,有的表現正常,有的會被鍵盤蓋住

IOS下:上輸入框,會把body的滾動區域,整體滾動到最上面,導致錯位

IOS下:下輸入框,會把body的滾動區域,整體滾動到最下面,導致錯位

body的區域,大於一屏時,基本IOS下的輸入框上下固定,是不可用的

4:小結

我們來總結一下,上面兩個示例的情況:

1:輸入框是固定在頂部和底部的,使用的是fixed

2:其他的內容區域是普通文檔流,文檔高度試了兩種:不超過一屏和超過一屏

這里因為是給的最簡單的示例,那么就代表着,基本不會受到其他屬性的影響,那么問題就來了:

首先,輸入框固定在頂部和底部,使用fixed是沒有問題的,不然無法固定,也不能實時的去計算,而且在IOS下,當頁面在滾動的時候,為了有更好的滾動體驗,是停止CSS渲染和JS的執行的,所以也不能實時的去計算,然后進行固定,所以使用fixed的固定,是必須要使用的。

那么,問題就只剩下兩個了:

1:內容區域是普通文檔流

2:內如區域的高度,超過一屏

就這兩個問題,我們前面已經看到了一種情況,就是當文檔不超過一屏時,在IOSAndroid下的表現效果,還是可以接受了,除了在Android的某些瀏覽器下,底部輸入框會被鍵盤蓋住之外,並沒有其他的不好的效果,尤其是頂部輸入框,都是可以完美的使用。

所以,這里的問題解決方案,就只剩下了一個,那么就是控制高度最多顯示為一屏的內容,這個也是我認為的,一個不錯的解決方案,移動端單屏布局方式。

雖然是單屏,但是內容區域,總不能限制為一點點內容了,所以,這里剩下的解決方案,就只剩下了一種,內容區域也使用固定布局

重新多添加一層div,該元素把所有非固定布局的元素包含在內(固定布局的不要包含,有問題的,這個在之后再寫一篇文章,來說明這個問題)。讓這個div占據屏幕的可視區域,但是,又不讓這個區域超出一屏的內容。所有的非固定元素,都在該div內部滾動,那么接下來,就看看效果如何吧。

5:單屏布局方式–解決方案

其主要的HTML和CSS如下:

<div class="input-top"> <input class = "input" type = "text" placeholder = "頂部輸入框" /> </div> <div class="input-bottom"> <input class = "input" type = "text" placeholder = "底部輸入框" /> </div> <div class="wrapper"> 該元素區域,占據很大的高度 </div> 

.wrapper{ position:absolute; top:30px; left:0px; right:0px; bottom:30px; overflow:auto; -webkit-overflow-scrolling : touch; } 

查看示例效果:

如果您在PC端,想要移動端測試一下,請掃碼:

如果您在移動端,或者在PC端,想要看下源代碼:單屏布局方式-解決上下輸入框固定在頂部和底部的DEMO

表現效果:

Android:上輸入框表現正常,下輸入框:相同的問題,有的表現正常,有的會被鍵盤蓋住(會出現該情況的手機,占據少數,而且跟瀏覽器相關)

IOS下:上輸入框表現正常

IOS下,下輸入框會彈到鍵盤上面,雖不是緊挨着鍵盤,但是情況可以接受。

所以這種情況下,是可以使用的,最好再把Android下的問題,解決一下,那么該方法,將是固定輸入框的最佳解決方案了

Android的手機,表現形式依然和前面的兩個示例,基本一致。

主要還是看IOS的表現了,從示例中,可以看到,表現與第一個示例,表現差不多,原因在於,它就是屬於第一種的情況,文檔高度,是低於一屏的。其表現形式也是很給力,頂部輸入框,可以完美的解決,底部輸入框稍微跳動,不過可以接受。

如果您使用這種布局,而且需要的是頂部輸入框固定的話,而且又不能跳轉新頁來實現該方法的話,那么單頁布局方式,將會非常有效,所以請考慮。

6:輸入框在普通流中

單頁布局,只適用於,需要固定布局的時候,其他的時候,還是使用普通流布局為好,畢竟越普遍的東西,其兼容性會越好,雖然理論上,單頁布局,不會出現其他的問題,但是誰又能保證一些瀏覽器,會被使用者,改成什么樣子呢。

而固定布局,其實也主要是為了解決IOS端的問題,對於Android端的,其實大可以直接使用普通布局來實現的,只是如果寫兩套的話,也有些麻煩的。

那么我們再來看看,輸入框在普通文檔流內部時的情況吧:

這個情況,在我看來,應用場景,是比前面固定布局的應用場景多的。該部分的內容,本篇就不做說明,因為雖然有些想法,但當前這些想法並沒有在實際中應用過,也沒有測試過一些機型,沒有經過驗證的東西,說出來就會變得有些不負責任了。

待我之后在項目中,以項目為試驗對象,總結研究過之后,再來說說普通流中,輸入框在Android下的一些易發狀況,以及處理方式。

總結

這位博主寫的很詳細但是還有些問題 ipone中第一次焦點時軟鍵盤會遮住部分輸入框,

 

使用焦點時

 interval = setInterval(function() {
document.body.scrollTop = document.body.scrollHeight
}, 100);
失去焦點取消
clearInterval(interval);
可以解決遮住的問題

 

本篇到此為止。

如果您發現文中有描述錯誤或者不當的地方,請留言指出,不勝感激,謝謝!

本文屬於原創文章,如需轉載,請注明出處,謝謝!

本文地址:http://www.zhangyunling.com/?p=579


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM