摘要:微信版本出現(xiàn)的問(wèn)題,用戶輸入時(shí),軟鍵盤(pán)彈出。收起軟鍵盤(pán)的時(shí)候,頁(yè)面下部軟鍵盤(pán)原來(lái)位置會(huì)變成一片空白區(qū)域,頁(yè)面沒(méi)有恢復(fù)原狀。實(shí)現(xiàn)原理出現(xiàn)上述情況,手動(dòng)下拉頁(yè)面,頁(yè)面會(huì)恢復(fù)正常。所以,在的事件中監(jiān)聽(tīng)軟鍵盤(pán)收起,模擬手動(dòng)下拉。前提,本身沒(méi)有滾動(dòng)。
iphone微信6.7.4版本出現(xiàn)的問(wèn)題,用戶輸入時(shí),軟鍵盤(pán)彈出。收起軟鍵盤(pán)的時(shí)候,頁(yè)面下部軟鍵盤(pán)原來(lái)位置會(huì)變成一片空白區(qū)域,頁(yè)面沒(méi)有恢復(fù)原狀。
var n = document.querySelectorAll("input,textarea"); Array.prototype.forEach.call(n, function(dom) { var pageDom = 5; dom.onblur = function() { document.body.scrollTop = ++pageDom; }; });
實(shí)現(xiàn)原理:出現(xiàn)上述情況,手動(dòng)下拉頁(yè)面,頁(yè)面會(huì)恢復(fù)正常。所以,在input的blur事件中監(jiān)聽(tīng)軟鍵盤(pán)收起,js模擬手動(dòng)下拉。前提,body本身沒(méi)有滾動(dòng)。
滾動(dòng)距離要?jiǎng)討B(tài)的,多個(gè)input時(shí)相同scrollTop會(huì)失敗,相當(dāng)于沒(méi)有滾動(dòng).
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/99947.html
摘要:然而,并沒(méi)有直接監(jiān)聽(tīng)軟鍵盤(pán)的原生事件,只能通過(guò)軟鍵盤(pán)彈起或收起,引發(fā)頁(yè)面其他方面的表現(xiàn)間接監(jiān)聽(tīng),曲線救國(guó)。軟鍵盤(pán)收起表現(xiàn)觸發(fā)輸入框以外的區(qū)域時(shí),輸入框失去焦點(diǎn),軟鍵盤(pán)收起。可以讓軟鍵盤(pán)彈起后,讓焦點(diǎn)元素再次滾到可視區(qū),強(qiáng)迫滾到位。 前言 最近一段時(shí)間在做 H5 聊天項(xiàng)目,踩過(guò)其中一大坑:輸入框獲取焦點(diǎn),軟鍵盤(pán)彈起,要求輸入框吸附(或頂)在輸入法框上。需求很明確,看似很簡(jiǎn)單,其實(shí)不然。從...
摘要:背景在寫(xiě)提交訂單頁(yè)面時(shí)候,底部按鈕當(dāng)我點(diǎn)擊輸入留言信息的時(shí)候,底部提交訂單按鈕被輸入法軟鍵盤(pán)頂上去遮擋住了。原來(lái)的樣式主要是當(dāng)輸入法點(diǎn)擊出現(xiàn)時(shí)候修改為綁定動(dòng)態(tài),,通過(guò)來(lái)顯示動(dòng)態(tài)顯示,初始值設(shè)置另外設(shè)置初始屏幕高度變化屏幕高度。 背景:在寫(xiě)提交訂單頁(yè)面時(shí)候,底部按鈕當(dāng)我點(diǎn)擊輸入留言信息的時(shí)候,底部提交訂單按鈕被輸入法軟鍵盤(pán)頂上去遮擋住了。 showImg(https://segmentf...
摘要:在之后,的框失焦后頁(yè)面會(huì)出現(xiàn)被頂上去一部分的下面就來(lái)看下怎么解決這個(gè),首先我們必須知道這兩個(gè)方法軟鍵盤(pán)彈起事件軟鍵盤(pán)關(guān)閉事件。 在iOS12之后,h5的input框失焦后頁(yè)面會(huì)出現(xiàn)被頂上去一部分的bug,下面就來(lái)看下怎么解決這個(gè)bug,首先我們必須知道這兩個(gè)方法focusin(軟鍵盤(pán)彈起事件)、focusout(軟鍵盤(pán)關(guān)閉事件)。注意:這里的input框的位置是在頁(yè)面的底部 廢話不多說(shuō)...
閱讀 2158·2023-04-25 20:45
閱讀 1068·2021-09-22 15:13
閱讀 3642·2021-09-04 16:48
閱讀 2580·2019-08-30 15:53
閱讀 928·2019-08-30 15:44
閱讀 936·2019-08-30 15:43
閱讀 1002·2019-08-29 16:33
閱讀 3432·2019-08-29 13:08