iOS下Html頁面中input獲取焦點彈出鍵盤時擋住input解決方案—scrollIntoView()

時間 2019-11-19

標籤 ios html 頁面 input 獲取焦點彈出鍵盤擋住解決方案 scrollintoview 欄目 iOS 简体版

原文原文鏈接

問題描述javascript

iOS系統下，移動web頁面，inpu獲取焦點彈出系統虛擬鍵盤時，偶爾會出現擋住input的狀況，儘管機率不大，可是十分影響用戶體驗。css

問題重現html

原始頁面：頁面中有header、main、footer三部分，其中 header 和 footer 經過 position: fixed; 定位在瀏覽器頂部和底部。java

其中，footer 中有一個input 輸入框。jquery

點擊 input 框使之獲取焦點，喚起虛擬鍵盤，正常頁面效果以下：ios

注：在ios系統喚起軟鍵盤，鍵盤和底部輸入框之間有一塊空白間距。web

可是偶爾會出現軟鍵盤擋住input框的狀況，以下：瀏覽器

針對此問題，目前沒有十分有效的方法，只能經過js調整input輸入框的位置，使之出如今正常的位置。測試

解決方法優化

scrollIntoView(alignWithTop): 滾動瀏覽器窗口或容器元素，以便在當前視窗的可見範圍看見當前元素。

alignWithTop 若爲 true，或者什麼都不傳，那麼窗口滾動以後會讓調用元素的頂部與視口頂部儘量平齊；

alignWithTop 若爲 false，調用元素會盡量所有出如今視口中，可能的話，調用元素的底部會與視口頂部平齊，不過頂部不必定平齊。

支持的瀏覽器：IE、Chrome、Firefox、Safari和Opera。

該方法是惟一一個全部瀏覽器都支持的方法，相似還有以下方法，可是隻有在Chrome和Safari有效：

scrollIntoViewIfNeeded(alignCenter)

scrollByLines(LineCount)

代碼以下：

再次測試，效果以下：

相比於input被擋住，突兀地出如今頁面中間更加能夠使人接受，可是屢次測試，仍然存在問題：當切換輸入法的時候，input框的位置會往下移動，被鍵盤擋住一部分，並且出現的機率比較高（中英文切換），效果以下：

針對這個問題，後期仍須要繼續調試和優化。

針對input輸入框被虛擬鍵盤擋住的問題，還有一個相似的解決方案：

當軟鍵盤被喚起是，使用 scrollTop() 方法使input元素滾動到指定的位置，可是滾動的具體數值須要調試才能給出，因此這裏就再也不演示了。

虛擬鍵盤擋住輸入框一直是web開發中的一個沒法避免且使人頭疼的問題，但願有人可以想出的更好的辦法，若是是瀏覽器或者系統的問題，但願官方能夠儘快解決。

參考資料：《JavaScript高級程序設計》P298

Demo 完整代碼：

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
 5     <title><%= title %></title>
 6     <link rel='stylesheet' href='/css/style.css' />
 7     <script src="/js/jquery-3.1.1.min.js" charset="utf-8"></script>
 8     <style>
 9       html, body {
10         height: 100%;
11         padding: 0;
12         margin: 0;
13       }
14       header {
15         position: fixed;
16         top: 0;
17         left: 0;
18         z-index: 9999;
19         width: 100%;
20         height: 50px;
21         line-height: 50px;
22         font-size: 18px;
23         text-align: center;
24         background: #ccc;
25       }
26       main {
27         position: absolute;
28         top: 50px;
29         bottom: 10px;
30         left: 20px;
31         width: 100%;
32         margin-bottom: 50px;
33         /* 使之能夠滾動 */
34         overflow-y: scroll;
35         /* 增長該屬性，能夠增長彈性，是滑動更加順暢 */
36         -webkit-overflow-scrolling: touch;
37       }
38       footer {
39         position: absolute;
40         bottom: 0;
41         left: 0;
42         width: 100%;
43         height: 50px;
44         line-height: 50px;
45         text-align: center;
46         background: #666;
47         border-top: 1px solid #e6e6e6;
48       }
49       footer input {
50         display: inline-block;
51         width: 90%;
52         height: 20px;
53         font-size: 14px;
54         outline: none;
55         border: 1px solid #e6e6e6;
56         border-radius: 5px;
57       }
58     </style>
59   </head>
60   <body>
61     <header>
62       This is the header
63     </header>
64     <main>
65       <h1><%= title %></h1>
66       <p>Welcome to <%= title %></p>
67       <ul>
68         <li>Today</li>
69         <li>is</li>
70         <li>Sunday</li>
71         <li>And</li>
72         <li>I</li>
73         <li>have</li>
74         <li>to</li>
75         <li>go</li>
76         <li>to</li>
77         <li>work</li>
78         <li>tomorrow</li>
79       </ul>
80     </main>
81     <footer>
82       <input type="text" placeholder="Type here...">
83     </footer>
84   </body>
85   <script type="text/javascript">
86     $(function() {
87       $('input').on('click', function () {
88         var target = this;
89         // 使用定時器是爲了讓輸入框上滑時更加天然
90         setTimeout(function(){
91           target.scrollIntoView(true);
92         },100);
93       });
94     })
95   </script>
96 </html>