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

Doyle 發(fā)布于2019-08-29 13:01 / 2706人閱讀

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

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

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

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)并彈出軟鍵盤的前提（移動(dòng)端我的理解）要讓輸入框顯示出來(lái)，這里就可以通過(guò)層或者透明度(opacity)來(lái)解決，由于業(yè)務(wù)關(guān)系透明度不適用所以大多數(shù)采用了層（z-index）來(lái)解決。

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/112312.html

相關(guān)文章

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

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

keelii 2019-08-20 18:19 評(píng)論0 收藏0
移動(dòng)端軟鍵盤彈出時(shí)文本輸入框下沉、獲取焦點(diǎn)并彈出軟鍵盤

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

phodal 2019-08-01 17:15 評(píng)論0 收藏0
Android軟鍵盤彈出，覆蓋h5頁(yè)面輸入框問(wèn)題

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

gclove 2019-08-30 15:54 評(píng)論0 收藏0
Android軟鍵盤彈出，覆蓋h5頁(yè)面輸入框問(wèn)題

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

URLOS 2019-08-02 13:56 評(píng)論0 收藏0
Android軟鍵盤彈出，覆蓋h5頁(yè)面輸入框問(wèn)題

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

Honwhy 2019-08-23 14:12 評(píng)論0 收藏0