首頁>>技術前沿>>B/S,C/S軟件系統開發在移動端的web開發中，一提起輸入框，程序猿（媛）肯定有很多可以吐槽的點。
在輸入框的運用中，小編也是很心累呀~
不過，經過我 潛心研究，也算是了解了它的脾氣
問題探究
1. ios中，輸入框獲得焦點時，頁面輸入框被遮蓋，定位的元素位置錯亂：
當頁input存在于吸頂或者吸底元素中時，用戶點擊輸入框，輸入法彈出后，fiexd失效，頁
面中定位好的元素隨屏幕滾動。針對這個問題，我們一起來看下以下幾種方案：
方案一： Web API 接口 ：scrollIntoView 的應用，將input輸入框顯示在可視區域。
輸入框獲得焦點時，元素移動到可視區域
inputOnFocus(e) {
setTimeout(function(){
e.target.scrollIntoView(true);
// true:元素的頂端將和其所在滾動區的可視區域的頂端對齊; false:底端對齊。
},200); // 延時 == 鍵盤彈起需要時間
}
一行代碼，輕松搞定，輸入框就乖乖的出現在你眼前了。不過有點小缺陷：頁面過長時，由于fixed失效，輸入框依然也會跟著頁面滑走。這時，我們需要一個固定的輸入框……
當獲得焦點彈出虛擬鍵盤后，input輸入框會一直緊貼鍵盤頂部。如果，你的頁面彈出輸入法后不需要滑動查看其他內容，那么你對這種方案應該很中意。但是，可能你做的是一個類似聊天的頁面，需要在回復時，查看歷史消息，那么，請你繼續往下看
方案三：將頁面進行拆分: 頁面（main） = 內容（sectionA） + 輸入框（sectionB）+ 其他（sectionOther）
2. IOS中單行輸入框輸入內容長被遮蓋，不能顯示全部，且不能左右滑動。這個是IOS的一個bug，可以考慮用 textarea 替換 input，設置一行的高，進行上下滾動查看。
3. 獲得焦點時，光標消失或錯位：
-webkit-user-select:none 導致 input 框在 IOS 中無法輸入，光標不出現。我們可以利用scrollIntoView 使當前元素出現到指定位置，避免光標錯位
4. 進入頁面如何自動獲取焦點，彈出軟鍵盤？
添加 autofocus 屬性 支持自動獲得焦點
觸發 focus() 事件
5.隨文字輸入，輸入框寬度自適應。
這種方案基本滿足自動獲取效果。
testLength 8 英文字符，testLength 16中文字符， +10為后邊光標預留位置。
這種方案顯然不適用于對精確度有很高要求的需求。
6. 介紹一個屬性：contenteditable，模擬輸入時動態獲取寬高
（1）div設置contentditable=true 可以將此元素變成可輸入狀態。
（2）想要變成input輸入框，利用css模擬輸入框的樣式
這里配合min-width，max-width 效果更真實。
（3）點擊div可以彈出軟鍵盤，但是無法輸入內容，需要設置屬性，如下
這樣就完成一個可以根據獲取輸入內容來動態來調節寬高。
還可以利用js模擬placeholder等，這里就不展開了
7.其他問題及解決
輸入框獲得焦點可彈出軟鍵盤，卻沒有光標閃爍，也無法正常輸入。-webkit-user-select:none 導致的，可以這樣解決
好了,就寫到這了，希望看過后對你能有幫助。
版權聲明:
1、弈聰軟件網站內容中凡注明“來源：XXX（非陜西弈聰網站）”的作品，轉載自其它媒體，轉載目的在于傳遞更多信息，其中涉及的網站建設，網站優化，APP開發，微信小程序開發，大數據平臺開發，區塊鏈技術開發等軟件開發技術細節并不代表本站贊同支持其觀點，并不對其真實性負責。對于署名“陜西弈聰”的作品系本站版權所有，任何人轉載請署名來源，否則陜西弈聰將追究其相關法律責任。
2、本站內容中未聲明為“原創”的內容可能源自其它網站，但并不代表本站支持其觀點，對此帶來的法律糾紛及其它責任與我方無關。如果此內容侵犯了您的權益，請聯系我方進行刪除。
企業動態
