亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

react在安卓中輸入框被手機(jī)鍵盤遮擋問題的解決方法

 更新時(shí)間：2018年09月03日 10:40:16   作者：秋収冬藏  
這篇文章主要給大家介紹了關(guān)于react在安卓中輸入框被手機(jī)鍵盤遮擋問題的解決方法，文中通過圖文以及示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧

前言

React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)樵摴緦?duì)市場(chǎng)上所有 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)鍵是頁(yè)面還不能向上滑動(dòng)，整個(gè)手機(jī)窗口被壓為原來的二分之一左右；

然后

然后找了一些方案，不過不大適用，或者是有點(diǎn)麻煩；所以需要整合一下，

首先，我想一下我要實(shí)現(xiàn)的效果（2018/9/3補(bǔ)充：評(píng)論區(qū)有更加簡(jiǎn)單的實(shí)現(xiàn)方法）

想要實(shí)現(xiàn)的效果

如圖，當(dāng)手機(jī)鍵盤出現(xiàn)時(shí)，頁(yè)面是可以自由滾動(dòng)的，而且當(dāng)前聚焦的輸入框往紅線處靠齊，這樣就剛好在剩下的窗口的垂直正中間，這樣就不會(huì)出現(xiàn)輸入框被擋住，看不到自己輸入的內(nèi)容了 ；

第一步，使屏幕壓小時(shí)，頁(yè)面內(nèi)容可以滾動(dòng)查看

如下圖所示，黑色框代表屏幕，藍(lán)色框代表頁(yè)面大小，當(dāng)屏幕被壓小時(shí)，頁(yè)面內(nèi)容必須保持原來的高度：

實(shí)現(xiàn)原理，頁(yè)面一進(jìn)來時(shí)，我就獲取窗口的高度，給最外層的div設(shè)置一個(gè)最小高度，這樣就算窗口壓小了，頁(yè)面還能維持原來的高度，可以滾動(dòng)瀏覽：

  let initWindowHeight=window.innerHeight
  let wrapDiv=document.getElementsByClassName('animated-router-forward-enter-done')[0]
  wrapDiv.style.minHeight =initWindowHeight+'px'

第二步，滾到紅線處

由于我們不能直接知道軟鍵盤什么時(shí)候出來，不過軟鍵盤出來的時(shí)候窗口高度會(huì)縮小，所以我們可以通過監(jiān)聽窗口大小變化事件來判斷軟鍵盤是否彈出，比如瀏覽器窗口高度突然縮小25%以上，那么我們就認(rèn)為是軟鍵盤出來了，然后我們獲取聚焦input距離頁(yè)面頂部的距離，計(jì)算距離紅線有多少距離，假設(shè)距離是60，那么我們就讓頁(yè)面向上滾動(dòng)60，這時(shí)input就剛剛好到了紅線處；

 window.onresize=function(){ 
  if(initWindowHeight-window.innerHeight>initWindowHeight/4&&document.querySelectorAll(':focus').length>0){
   //offset是封裝好的一個(gè)獲取元素距離頁(yè)面頂部滾動(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è)頁(yè)面要調(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í)候窗口高度會(huì)縮小，所以我們可以通過監(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頁(yè)面中引入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é)：

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

最新評(píng)論