首頁>>技術前沿>>B/S,C/S軟件系統開發
當你的輸入框不聽話時,你可以這樣干
作者:西安軟件公司 | 原創 來源:西安軟件公司 | 時間:2018年10月19日| 點擊:0次 | 【評論】

在移動端的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 導致的,可以這樣解決
好了,就寫到這了,希望看過后對你能有幫助。

此內容DOC下載 此內容PDF下載

【全文完】
關鍵詞標簽: 前端 
0 ([$-頂稿人數-$])
0 ([$-踩稿人數-$])

版權聲明:

1、弈聰軟件網站內容中凡注明“來源:XXX(非西安弈聰網站)”的作品,轉載自其它媒體,轉載目的在于傳遞更多信息,其中涉及的網站建設,網站優化,APP開發,微信小程序開發,大數據平臺開發,區塊鏈技術開發等軟件開發技術細節并不代表本站贊同支持其觀點,并不對其真實性負責。對于署名“西安弈聰”的作品系本站版權所有,任何人轉載請署名來源,否則西安弈聰將追究其相關法律責任。

2、本站內容中未聲明為“原創”的內容可能源自其它網站,但并不代表本站支持其觀點,對此帶來的法律糾紛及其它責任與我方無關。如果此內容侵犯了您的權益,請聯系我方進行刪除。

打篮球必学规则