react在安卓中輸入框被手機(jī)鍵盤遮擋問題的解決方法
前言
React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)樵摴緦κ袌錾纤?JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設(shè) Instagram 的網(wǎng)站。做出來以后，發(fā)現(xiàn)這套東西很好用，就在2013年5月開源了。
本文主要介紹了關(guān)于react在安卓輸入框被鍵盤遮擋的相關(guān)內(nèi)容，分享出來動(dòng)大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧
問題概述
今天遇到了一個(gè)問題，在安卓手機(jī)上，當(dāng)我要點(diǎn)擊輸入“店鋪名稱”時(shí)，手機(jī)軟鍵盤彈出來剛好把輸入框擋住了；擋住就算了，關(guān)鍵是頁面還不能向上滑動(dòng)，整個(gè)手機(jī)窗口被壓為原來的二分之一左右；
然后
然后找了一些方案，不過不大適用，或者是有點(diǎn)麻煩；所以需要整合一下，
首先，我想一下我要實(shí)現(xiàn)的效果（2018/9/3補(bǔ)充：評論區(qū)有更加簡單的實(shí)現(xiàn)方法）
想要實(shí)現(xiàn)的效果
如圖，當(dāng)手機(jī)鍵盤出現(xiàn)時(shí)，頁面是可以自由滾動(dòng)的，而且當(dāng)前聚焦的輸入框往紅線處靠齊，這樣就剛好在剩下的窗口的垂直正中間，這樣就不會出現(xiàn)輸入框被擋住，看不到自己輸入的內(nèi)容了 ；
第一步，使屏幕壓小時(shí)，頁面內(nèi)容可以滾動(dòng)查看
如下圖所示，黑色框代表屏幕，藍(lán)色框代表頁面大小，當(dāng)屏幕被壓小時(shí)，頁面內(nèi)容必須保持原來的高度：
實(shí)現(xiàn)原理，頁面一進(jìn)來時(shí)，我就獲取窗口的高度，給最外層的div設(shè)置一個(gè)最小高度，這樣就算窗口壓小了，頁面還能維持原來的高度，可以滾動(dòng)瀏覽：
let initWindowHeight=window.innerHeight
let wrapDiv=document.getElementsByClassName('animated-router-forward-enter-done')[0]
wrapDiv.style.minHeight =initWindowHeight+'px'
第二步，滾到紅線處
由于我們不能直接知道軟鍵盤什么時(shí)候出來，不過軟鍵盤出來的時(shí)候窗口高度會縮小，所以我們可以通過監(jiān)聽窗口大小變化事件來判斷軟鍵盤是否彈出，比如瀏覽器窗口高度突然縮小25%以上，那么我們就認(rèn)為是軟鍵盤出來了，然后我們獲取聚焦input距離頁面頂部的距離，計(jì)算距離紅線有多少距離，假設(shè)距離是60，那么我們就讓頁面向上滾動(dòng)60，這時(shí)input就剛剛好到了紅線處；
window.onresize=function(){
if(initWindowHeight-window.innerHeight>initWindowHeight/4&&document.querySelectorAll(':focus').length>0){
//offset是封裝好的一個(gè)獲取元素距離頁面頂部滾動(dòng)距離的方法
if(offset(document.querySelectorAll(':focus')[0]).top>initWindowHeight/4){
document.body.scrollTop=offset(document.querySelectorAll(':focus')[0]).top-initWindowHeight/4
}
}else if(window.innerHeight-initWindowHeight<20){
document.body.scrollTop=0
}
};
完整代碼
因?yàn)榭赡苡卸鄠€(gè)頁面要調(diào)用，所以我把代碼放到一個(gè)單獨(dú)的js文件中：
function pageInputScroll() {
let initWindowHeight=window.innerHeight
setTimeout(() => {
let wrapDiv=document.getElementsByClassName('animated-router-forward-enter-done')[0]
//console.log(wrapDiv.style)
wrapDiv.style.minHeight =initWindowHeight+'px'
}, 500);
//由于我們不能直接知道軟鍵盤什么時(shí)候出來，不過軟鍵盤出來的時(shí)候窗口高度會縮小，所以我們可以通過監(jiān)聽窗口大小變化事件來判斷軟鍵盤是否彈出
window.onresize=function(){ //如果瀏覽器窗口高度縮小25%以上，就認(rèn)為是軟鍵盤出來了
if(initWindowHeight-window.innerHeight>initWindowHeight/4&&document.querySelectorAll(':focus').length>0){
if(offset(document.querySelectorAll(':focus')[0]).top>initWindowHeight/4){
document.body.scrollTop=offset(document.querySelectorAll(':focus')[0]).top-initWindowHeight/4
}
}else if(window.innerHeight-initWindowHeight<20){
document.body.scrollTop=0
}
};
}
function offset(element) {
var offest = {
top: 0,
left: 0
};
var _position;
getOffset(element, true);
return offest;
// 遞歸獲取 offset, 可以考慮使用 getBoundingClientRect
function getOffset(node, init) {
// 非Element 終止遞歸
if (node.nodeType !== 1) {
return;
}
_position = window.getComputedStyle(node)['position'];
// position=static: 繼續(xù)遞歸父節(jié)點(diǎn)
if (typeof(init) === 'undefined' && _position === 'static') {
getOffset(node.parentNode);
return;
}
offest.top = node.offsetTop + offest.top - node.scrollTop;
offest.left = node.offsetLeft + offest.left - node.scrollLeft;
// position = fixed: 獲取值后退出遞歸
if (_position === 'fixed') {
return;
}
getOffset(node.parentNode);
}
}
export {pageInputScroll};
在react頁面中引入js并調(diào)用：
import {pageInputScroll} from '../../util/pageInputScroll'
......
componentDidMount(){
pageInputScroll()
}
如果只是想在安卓下使用，可以加一個(gè)判斷：
if(/Android/i.test(navigator.userAgent)){
pageInputScroll()
}
效果動(dòng)圖
我在pc端的谷歌瀏覽器模擬一下實(shí)現(xiàn)的效果：
備注
offset()方法是使用js實(shí)現(xiàn)類似jquery的offset()的一個(gè)方法，參考自：原生js實(shí)現(xiàn)offset方法
總結(jié)：
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
懶加載意思是不會預(yù)加載，而是需要使用某段代碼，某個(gè)組件或者某張圖片時(shí)，才加載他們（延遲加載），這篇文章主要介紹了React懶加載實(shí)現(xiàn)原理2022-11-11
react hook使用useState更新數(shù)組,無法更新問題及解決
這篇文章主要介紹了react hook使用useState更新數(shù)組,無法更新問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解React-Native全球化多語言切換工具庫react-native-i18n
這篇文章主要介紹了詳解React-Native全球化語言切換工具庫react-native-i18n,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
前兩章講到了，react 在 render 階段的 completeUnitWork 執(zhí)行完畢后，就執(zhí)行 commitRoot 進(jìn)入到了 commit 階段，本章將講解 commit 階段執(zhí)行過程源碼2022-11-11
這篇文章主要介紹了React.cloneElement的使用詳解，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要為大家詳細(xì)介紹了react中的雙向綁定，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
在使用?React?進(jìn)行開發(fā)過程中，或多或少使用過?Refs?進(jìn)行?DOM?操作，這篇文章主要介紹了?Refs?功能和使用場景以及注意事項(xiàng)，希望對大家有所幫助2023-07-07
這篇文章主要為大家詳細(xì)介紹了React?Hook實(shí)現(xiàn)對話框組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
ForwardRef?useImperativeHandle方法demo
這篇文章主要為大家介紹了ForwardRef?useImperativeHandle方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
下面小編就為大家?guī)硪黄獪\談react.js 之 批量添加與刪除功能。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04