如何做一個聽話的 “輸入框”

WebKit · 發表 2018-10-18 23:39:40

摘要：前言在移動端的web開發中，一提起輸入框，程式猿（媛）肯定有很多可以吐槽的點。在輸入框的運用中，小編也是很心累呀~ 不過，經過我潛（cai）心（keng）研（jiao）究（xun），也算是瞭解了它的脾性… … 特別鳴謝：周涵，家興等正文這裡開始  — —...

前言

在移動端的web開發中，一提起輸入框，程式猿（媛）肯定有很多可以吐槽的點。

在輸入框的運用中，小編也是很心累呀~

不過，經過我潛（cai）心（keng）研（jiao）究（xun），也算是瞭解了它的脾性… …

特別鳴謝：周涵，家興等

正文這裡開始  — — — — — — — —

問題探究

1. ios中，輸入框獲得焦點時，頁面輸入框被遮蓋，定位的元素位置錯亂：

當頁input存在於吸頂或者吸底元素中時，使用者點選輸入框，輸入法彈出後，fiexd失效，頁面中定位好的元素隨螢幕滾動。

針對這個問題，我們一起來看下以下幾種方案：

方案一： Web API 介面：scrollIntoView的應用，將input輸入框顯示在可視區域。

// 輸入框獲得焦點時，元素移動到可視區域
inputOnFocus(e) { 
    setTimeout(function(){
        e.target.scrollIntoView(true); 
        // true:元素的頂端將和其所在滾動區的可視區域的頂端對齊; false:底端對齊。 
    },200);  // 延時 == 鍵盤彈起需要時間
}

一行程式碼，輕鬆搞定，輸入框就乖乖的出現在你眼前了。

不過有點小缺陷：頁面過長時，由於fixed失效，輸入框依然也會跟著頁面滑走。

這時，我們需要一個固定的輸入框……

方案二：在輸入框獲得焦點時，將頁面滑動到最底部，避免fixed導致的頁面亂飛，並且保證input在最底部。

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

效果如下圖：

當獲得焦點彈出虛擬鍵盤後，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模擬輸入框的樣式

.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 效果更真實。

（3）點選div可以彈出軟鍵盤，但是無法輸入內容，需要設定屬性，如下

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

這樣就完成一個可以根據獲取輸入內容來動態來調節寬高。

還可以利用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;
}

好了,就寫到這了，希望看過後對你能有幫助。

輸入框中的坑還是很多了，本文也難免會有有含蓋不全的情況，歡迎小夥伴們給我們留言，共同探討。

持續關注我們，會給大家奉獻更多精品文章。