1. ios中，輸入框獲得焦點時，頁面輸入框被遮蓋，定位的元素位置錯亂：
當頁input存在於吸頂或者吸底元素中時，用戶點擊輸入框，輸入法彈出后，fiexd失效，頁面中定位好的元素隨屏幕滾動。
針對這個問題，我們一起來看下以下幾種方案：
方案一： Web API 接口 ：scrollIntoView 的應用，將input輸入框顯示在可視區域。
1 // 輸入框獲得焦點時，元素移動到可視區域 2 3 inputOnFocus(e) { 4 setTimeout(function(){ 5 e.target.scrollIntoView(true); 6 // true:元素的頂端將和其所在滾動區的可視區域的頂端對齊; false:底端對齊。 7 },200); // 延時 == 鍵盤彈起需要時間 8 }
一行代碼，輕松搞定，輸入框就乖乖的出現在你眼前了。
不過有點小缺陷：頁面過長時，由於fixed失效，輸入框依然也會跟着頁面滑走。
這時，我們需要一個固定的輸入框......
方案二：在輸入框獲得焦點時，將頁面滑動到最底部，避免fixed導致的頁面亂飛，並且保證input在最底部。
1 var timer； 2 // 輸入框獲得焦點時，將元素設置為position:static，設置timer 3 inputOnFocus(e) { 4 e.target.style.className = 'input input-static'; 5 timer = setInterval( 6 function() { 7 document.body.scrollTop = document.body.scrollHeight 8 }, 100) 9 }； 10 // 輸入框失去焦點時，將元素設置為 position:fixed，清除timer 11 inputOnbulr(e) { 12 e.target.parentNode.className = 'input input-fixed'; 13 clearInterval(timer) 14 }；
當獲得焦點彈出虛擬鍵盤后，input輸入框會一直緊貼鍵盤頂部。如果，你的頁面彈出輸入法后不需要滑動查看其他內容，那么你對這種方案應該很中意。
But，可能你做的是一個類似聊天的頁面，需要在回復時，查看歷史消息，那么，請你繼續往下看
方案三：將頁面進行拆分: 頁面（main） = 內容（sectionA） + 輸入框（sectionB）+ 其他（sectionOther）
原理 ： main.height = window.screen.height ;
sectionA 絕對定位，進行內部滾動 overflow-y：scroll ;
sectionB 可保證在頁面最底部。
.main { position: relative; height: 100%; }
.sectionA { box-sizing: border-box; padding-bottom: 60px; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch //為了使滾動流暢，sectionA 添加屬性 }
.sectionB { position: absolute; height: 60px; overflow: hidden; left: 0; right: 0; bottom: 0; }
純css3打造，可以滾動，可以固定位置,基本滿足大部分布局需要。
2. IOS 中單行輸入框輸入內容長被遮蓋，不能顯示全部，且不能左右滑動。
這個是IOS的一個bug，可以考慮用 textarea 替換 input，設置一行的高，進行上下滾動查看。（其他方案可以參看下面 第 6 點）
3. 獲得焦點時，光標消失或錯位：
-webkit-user-select:none 導致 input 框在 iOS 中無法輸入，光標不出現，設置如下
user-select: text; -webkit-user-select: text;
利用scrollIntoView 使當前元素出現到指定位置，避免光標錯位，設置如下：
e.target.scrollIntoView(true); e.target.scrollIntoViewIfNeeded();
4. 進入頁面如何自動獲取焦點，彈出軟鍵盤？
-
添加 autofocus 屬性 支持自動獲得焦點
-
觸發 focus() 事件
5.隨文字輸入，輸入框寬度自適應。
onkeyPress(e) { const testLength = e.target.value.length; e.target.style.width = `${testLength*8+10}px` }
這種方案基本滿足自動獲取效果。
testLength * 8 英文字符，testLength * 16中文字符， +10為后邊光標預留位置。 這種方案顯然不適用於對精確度有很高要求的需求。
6. 介紹一個屬性：contenteditable，模擬輸入時動態獲取寬高
（1）div設置contentditable=true 可以將此元素變成可輸入狀態。
<div class="inputContent" contenteditable="true" ></div>
（2）想要變成input輸入框，利用css模擬輸入框的樣式
1 .inputContent{ 2 color: #444; 3 border: #999 solid 1px; 4 border-radius: 3px; 5 padding: 5px 10px; 6 box-sizing: border-box; 7 min-width: 50px; 8 max-width: 300px; 9 background: #ffffff; 10 }
這里配合min-width，max-width 效果更真實。
（3）點擊div可以彈出軟鍵盤，但是無法輸入內容，需要設置屬性，如下
.inputContent{ user-select:text; -webkit-user-select:text; }
這樣就完成一個可以根據獲取輸入內容來動態來調節寬高。
（這里是一個gif圖）
還可以利用js模擬placeholder等，這里就不展開了
7.其他問題及解決
-
輸入框獲得焦點可彈出軟鍵盤，卻沒有光標閃爍，也無法正常輸入。
-webkit-user-select:none 導致的，可以這樣解決
*:not(input,textarea) { -webkit-touch-callout: none; -webkit-user-select: none; }
-
input 自定義樣式
// 使用偽類 input::-webkit-input-placeholder, input::-moz-placeholder, input::-ms-input-placeholder { ...style text-align: center; }
8. 補丁：近期移動端開發中遇到這樣一個問題：ios下 輸入框獲取焦點后，頁面正題網上頂（這沒毛病）， 尷尬的是失去焦點后頁面不回彈了，頂部上移了，底部留有一截灰色區域，需要手動隨意觸摸一個地方。才會回彈。
問題1：測試說交互、體驗不好；
問題2：假如頁面有ui框架的彈窗，在頁面沒有回彈的情況下，發現彈層里面的按鈕無法點擊
解決方法：監聽軟鍵盤彈起、關閉事件，在進行對應的操作
mounted () {// 軟鍵盤關閉事件 可在全局的地方 vue的話比如App.vue 文件里添加以下代碼 document.body.addEventListener('focusout', () => { // 回到原點 若覺得一瞬間回到底部不夠炫酷，那自己可以自定義緩慢回彈效果， 可用css 、貝塞爾曲線、js的 requestAnimationFrame 等等 方法 實現體驗性更好的回彈效果 window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }) }) }
好了,就寫到這了，希望看過后對你能有幫助。
