移動端軟鍵盤彈出時(shí)文本輸入框下沉、獲取焦點(diǎn)并彈出軟鍵盤

keelii 發(fā)布于2019-08-20 18:19 / 3325人閱讀

摘要：文本輸入框容易下沉因?yàn)檐涙I盤彈出時(shí)是一個(gè)動畫方法利用滾動條，彈出軟鍵盤的時(shí)候讓滾動條滾動到最底部。效果點(diǎn)擊按鈕彈出輸入框獲取焦點(diǎn)并彈出軟鍵盤類似微信朋友圈空間。

## 文本輸入框容易下沉因?yàn)檐涙I盤彈出時(shí)是一個(gè)動畫 ##

//方法：利用滾動條，彈出軟鍵盤的時(shí)候讓滾動條滾動到最底部。并設(shè)置一個(gè)定時(shí)器每過0.5秒設(shè)置一次，
//這個(gè)是因?yàn)檐涙I盤還沒有完全彈出滾動條已經(jīng)到此時(shí)的底部了，等軟鍵盤完全彈出后就遮住了輸入框（需要再次設(shè)置滾動條）。

let interval;

//消息框獲取焦點(diǎn)
 document.querySelector(".class或者#id").onfocus = function(){
   interval = setInterval(function() {
        document.body.scrollTop = document.body.scrollHeight;
    }, 500)
}

//消息框失去焦點(diǎn)
document.querySelector(".class或者#id").onblur = function(){
    clearInterval(interval);
}

以上是借鑒segmentfault前輩總結(jié)

文本輸入框獲取焦點(diǎn)并彈出軟鍵盤（適用文本框開始隱藏需要觸發(fā)顯示）

解決思路：獲取焦點(diǎn)并彈出軟鍵盤的前提（移動端我的理解）要讓輸入框顯示出來，這里就可以通過層或者透明度(opacity)來解決，由于業(yè)務(wù)關(guān)系透明度不適用所以大多數(shù)采用了層（z-index）來解決。

效果：點(diǎn)擊按鈕彈出輸入框獲取焦點(diǎn)并彈出軟鍵盤（類似微信朋友圈、QQ空間）。

云服務(wù)器 GPU云服務(wù)器 java鍵盤獲取焦點(diǎn) 鍵盤遮擋輸入框 html輸入框鍵盤 jq彈出輸入框

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/84344.html

相關(guān)文章

移動端軟鍵盤彈出時(shí)文本輸入框下沉、獲取焦點(diǎn)并彈出軟鍵盤

摘要：文本輸入框容易下沉因?yàn)檐涙I盤彈出時(shí)是一個(gè)動畫方法利用滾動條，彈出軟鍵盤的時(shí)候讓滾動條滾動到最底部。效果點(diǎn)擊按鈕彈出輸入框獲取焦點(diǎn)并彈出軟鍵盤類似微信朋友圈空間。 ## 文本輸入框容易下沉因?yàn)檐涙I盤彈出時(shí)是一個(gè)動畫 ## //方法：利用滾動條，彈出軟鍵盤的時(shí)候讓滾動條滾動到最底部。并設(shè)置一個(gè)定時(shí)器每過0.5秒設(shè)置一次， //這個(gè)是因?yàn)檐涙I盤還沒有完全彈出滾動條已經(jīng)到此時(shí)的底部了，等軟鍵盤...

Doyle 2019-08-29 13:01 評論0 收藏0
移動端軟鍵盤彈出時(shí)文本輸入框下沉、獲取焦點(diǎn)并彈出軟鍵盤

摘要：文本輸入框容易下沉因?yàn)檐涙I盤彈出時(shí)是一個(gè)動畫方法利用滾動條，彈出軟鍵盤的時(shí)候讓滾動條滾動到最底部。效果點(diǎn)擊按鈕彈出輸入框獲取焦點(diǎn)并彈出軟鍵盤類似微信朋友圈空間。 ## 文本輸入框容易下沉因?yàn)檐涙I盤彈出時(shí)是一個(gè)動畫 ## //方法：利用滾動條，彈出軟鍵盤的時(shí)候讓滾動條滾動到最底部。并設(shè)置一個(gè)定時(shí)器每過0.5秒設(shè)置一次， //這個(gè)是因?yàn)檐涙I盤還沒有完全彈出滾動條已經(jīng)到此時(shí)的底部了，等軟鍵盤...

phodal 2019-08-01 17:15 評論0 收藏0
Android軟鍵盤彈出，覆蓋h5頁面輸入框問題

摘要：代碼調(diào)試去除的，給添加一個(gè)正好能讓軟鍵盤彈出后遮住輸入框的高度，高度軟鍵盤出現(xiàn)后高度輸入框高度保存按鈕高度，發(fā)現(xiàn)鍵盤彈出遮擋著后，框會自動上移到可視區(qū)內(nèi)，問題定位成功。 Android軟鍵盤彈出，覆蓋h5頁面輸入框問題移動端開發(fā)過程中，我們經(jīng)常遇到h5表單錄入頁面，在Android系統(tǒng)webview中，由于軟鍵盤彈出，導(dǎo)致覆蓋 h5頁面輸入框問題，在此進(jìn)行回顧并分享給大家系統(tǒng)：An...

gclove 2019-08-30 15:54 評論0 收藏0
Android軟鍵盤彈出，覆蓋h5頁面輸入框問題

摘要：代碼調(diào)試去除的，給添加一個(gè)正好能讓軟鍵盤彈出后遮住輸入框的高度，高度軟鍵盤出現(xiàn)后高度輸入框高度保存按鈕高度，發(fā)現(xiàn)鍵盤彈出遮擋著后，框會自動上移到可視區(qū)內(nèi)，問題定位成功。 Android軟鍵盤彈出，覆蓋h5頁面輸入框問題移動端開發(fā)過程中，我們經(jīng)常遇到h5表單錄入頁面，在Android系統(tǒng)webview中，由于軟鍵盤彈出，導(dǎo)致覆蓋 h5頁面輸入框問題，在此進(jìn)行回顧并分享給大家系統(tǒng)：An...

URLOS 2019-08-02 13:56 評論0 收藏0
Android軟鍵盤彈出，覆蓋h5頁面輸入框問題

摘要：代碼調(diào)試去除的，給添加一個(gè)正好能讓軟鍵盤彈出后遮住輸入框的高度，高度軟鍵盤出現(xiàn)后高度輸入框高度保存按鈕高度，發(fā)現(xiàn)鍵盤彈出遮擋著后，框會自動上移到可視區(qū)內(nèi)，問題定位成功。 Android軟鍵盤彈出，覆蓋h5頁面輸入框問題移動端開發(fā)過程中，我們經(jīng)常遇到h5表單錄入頁面，在Android系統(tǒng)webview中，由于軟鍵盤彈出，導(dǎo)致覆蓋 h5頁面輸入框問題，在此進(jìn)行回顧并分享給大家系統(tǒng)：An...

Honwhy 2019-08-23 14:12 評論0 收藏0