如何做一個聽話的 “輸入框”
前言
在移動端的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; }
好了,就寫到這了,希望看過後對你能有幫助。
輸入框中的坑還是很多了,本文也難免會有有含蓋不全的情況,歡迎小夥伴們給我們留言,共同探討。
持續關注我們,會給大家奉獻更多精品文章。