1. ios中，輸入框獲得焦點(diǎn)時(shí)，頁(yè)面輸入框被遮蓋，定位的元素位置錯(cuò)亂：

當(dāng)頁(yè)input存在于吸頂或者吸底元素中時(shí)，用戶點(diǎn)擊輸入框，輸入法彈出后，fiexd失效，頁(yè)面中定位好的元素隨屏幕滾動(dòng)。

針對(duì)這個(gè)問(wèn)題，我們一起來(lái)看下以下幾種方案：
方案一： Web API 接口 ：scrollIntoView 的應(yīng)用，將input輸入框顯示在可視區(qū)域。

// 輸入框獲得焦點(diǎn)時(shí)，元素移動(dòng)到可視區(qū)域

inputOnFocus(e) {
   setTimeout(function(){
       e.target.scrollIntoView(true);
       // true:元素的頂端將和其所在滾動(dòng)區(qū)的可視區(qū)域的頂端對(duì)齊; false:底端對(duì)齊。
   },200);  // 延時(shí) == 鍵盤(pán)彈起需要時(shí)間
}

一行代碼，輕松搞定，輸入框就乖乖的出現(xiàn)在你眼前了。
不過(guò)有點(diǎn)小缺陷：頁(yè)面過(guò)長(zhǎng)時(shí)，由于fixed失效，輸入框依然也會(huì)跟著頁(yè)面滑走。
這時(shí)，我們需要一個(gè)固定的輸入框......

方案二：在輸入框獲得焦點(diǎn)時(shí)，將頁(yè)面滑動(dòng)到最底部，避免fixed導(dǎo)致的頁(yè)面亂飛，并且保證input在最底部。

 var timer；
 // 輸入框獲得焦點(diǎn)時(shí)，將元素設(shè)置為position:static，設(shè)置timer
 inputOnFocus(e) {
    e.target.style.className = 'input input-static';
    timer = setInterval(
        function() {
            document.body.scrollTop = document.body.scrollHeight
        }, 100)
 }；
 // 輸入框失去焦點(diǎn)時(shí)，將元素設(shè)置為 position:fixed，清除timer
 inputOnbulr(e) {
    e.target.parentNode.className = 'input input-fixed';
    clearInterval(timer)
 }；

當(dāng)獲得焦點(diǎn)彈出虛擬鍵盤(pán)后，input輸入框會(huì)一直緊貼鍵盤(pán)頂部。如果，你的頁(yè)面彈出輸入法后不需要滑動(dòng)查看其他內(nèi)容，那么你對(duì)這種方案應(yīng)該很中意。
But，可能你做的是一個(gè)類似聊天的頁(yè)面，需要在回復(fù)時(shí)，查看歷史消息，那么，請(qǐng)你繼續(xù)往下看

方案三：將頁(yè)面進(jìn)行拆分: 頁(yè)面（main） = 內(nèi)容（sectionA） + 輸入框（sectionB）+ 其他（sectionOther）

原理 ： main.height = window.screen.height ;
sectionA 絕對(duì)定位，進(jìn)行內(nèi)部滾動(dòng) overflow-y：scroll ;
sectionB 可保證在頁(yè)面最底部。
.main { position: relative; height: 100%; }
.sectionA { box-sizing: border-box; padding-bottom: 60px; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch //為了使?jié)L動(dòng)流暢，sectionA 添加屬性 }
.sectionB { position: absolute; height: 60px; overflow: hidden; left: 0; right: 0; bottom: 0; }　

純css3打造，可以滾動(dòng)，可以固定位置,基本滿足大部分布局需要。

2. IOS 中單行輸入框輸入內(nèi)容長(zhǎng)被遮蓋，不能顯示全部，且不能左右滑動(dòng)。

這個(gè)是IOS的一個(gè)bug，可以考慮用 textarea 替換 input，設(shè)置一行的高，進(jìn)行上下滾動(dòng)查看。（其他方案可以參看下面 第 6 點(diǎn)）

3. 獲得焦點(diǎn)時(shí)，光標(biāo)消失或錯(cuò)位：

-webkit-user-select:none 導(dǎo)致 input 框在 iOS 中無(wú)法輸入，光標(biāo)不出現(xiàn)，設(shè)置如下

user-select: text;
-webkit-user-select: text;

利用scrollIntoView 使當(dāng)前元素出現(xiàn)到指定位置，避免光標(biāo)錯(cuò)位，設(shè)置如下：

e.target.scrollIntoView(true);  
e.target.scrollIntoViewIfNeeded();

4. 進(jìn)入頁(yè)面如何自動(dòng)獲取焦點(diǎn)，彈出軟鍵盤(pán)？

• 添加 autofocus 屬性 支持自動(dòng)獲得焦點(diǎn)
• 觸發(fā) focus() 事件

5.隨文字輸入，輸入框?qū)挾茸赃m應(yīng)。

onkeyPress(e) {
   const testLength = e.target.value.length;
   e.target.style.width = `${testLength*8+10}px`
 }

這種方案基本滿足自動(dòng)獲取效果。
testLength * 8 英文字符，testLength * 16中文字符， +10為后邊光標(biāo)預(yù)留位置。 這種方案顯然不適用于對(duì)精確度有很高要求的需求。

6. 介紹一個(gè)屬性：contenteditable，模擬輸入時(shí)動(dòng)態(tài)獲取寬高

（1）div設(shè)置contentditable=true 可以將此元素變成可輸入狀態(tài)。

<div  class="inputContent"  contenteditable="true" ></div>

（2）想要變成input輸入框，利用css模擬輸入框的樣式

.inputContent{
   color: #444;
   border: #999 solid 1px;
   border-radius: 3px;
   padding: 5px 10px;
   box-sizing: border-box;
   min-width: 50px;
   max-width: 300px;
   background: #ffffff;
 }

這里配合min-width，max-width 效果更真實(shí)。
3）點(diǎn)擊div可以彈出軟鍵盤(pán)，但是無(wú)法輸入內(nèi)容，需要設(shè)置屬性，如下

.inputContent{
    user-select:text;
    -webkit-user-select:text;
}

這樣就完成一個(gè)可以根據(jù)獲取輸入內(nèi)容來(lái)動(dòng)態(tài)來(lái)調(diào)節(jié)寬高。
還可以利用js模擬placeholder等，這里就不展開(kāi)了

7.其他問(wèn)題及解決

• 輸入框獲得焦點(diǎn)可彈出軟鍵盤(pán)，卻沒(méi)有光標(biāo)閃爍，也無(wú)法正常輸入。
  -webkit-user-select:none 導(dǎo)致的，可以這樣解決

*: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、補(bǔ)?。航谝苿?dòng)端開(kāi)發(fā)中遇到這樣一個(gè)問(wèn)題：ios下 輸入框獲取焦點(diǎn)后，頁(yè)面正題網(wǎng)上頂（這沒(méi)毛?。?， 尷尬的是失去焦點(diǎn)后頁(yè)面不回彈了，頂部上移了，底部留有一截灰色區(qū)域，需要手動(dòng)隨意觸摸一個(gè)地方。才會(huì)回彈。

問(wèn)題1：測(cè)試說(shuō)交互、體驗(yàn)不好；
問(wèn)題2：假如頁(yè)面有ui框架的彈窗，在頁(yè)面沒(méi)有回彈的情況下，發(fā)現(xiàn)彈層里面的按鈕無(wú)法點(diǎn)擊

解決方法：監(jiān)聽(tīng)軟鍵盤(pán)彈起、關(guān)閉事件，在進(jìn)行對(duì)應(yīng)的操作

mounted () {// 軟鍵盤(pán)關(guān)閉事件   可在全局的地方  vue的話比如App.vue 文件里添加以下代碼
    document.body.addEventListener('focusout', () => {
      // 回到原點(diǎn)  若覺(jué)得一瞬間回到底部不夠炫酷，那自己可以自定義緩慢回彈效果， 可用css 、貝塞爾曲線、js的 requestAnimationFrame  等等 方法 實(shí)現(xiàn)體驗(yàn)性更好的回彈效果
      window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
    })
}