移動端input「輸入框」常見問題及解決方法

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' })
    })
}　

好了,就寫到這了，但願看事後對你能有幫助。