解決ios 輸入後鍵盤收起,頁面卡住不回落、fixed定位元素隨鍵盤彈起。andriod鍵盤彈起時,輸入框被遮蓋、fixed定位元素隨鍵盤彈起等bug

前言:最近在寫h5,發現以下幾個問題
1.iphone xs設備上,input框或textarea框輸入彈起鍵盤後,點擊確定收回鍵盤時,鍵盤消失,但是鍵盤所佔的框還在,頁面沒有回落。
2.ios和andriod設備上fixed定位元素隨鍵盤彈起。
在這裏插入圖片描述在這裏插入圖片描述

3.andriod鍵盤彈起時,頁面未隨着鍵盤彈起而向上移,導致輸入框被遮蓋
本文主要解決上訴三個問題
問題分析:ios可以通過監聽onBlur(鍵盤收起)和onFocus(鍵盤彈出)來模擬獲取鍵盤的彈出和收起事件,因爲ios鍵盤收起的時候會觸發onBlur失去焦點。但是andriod卻無法通過onBlur和onFocus事件取監聽鍵盤的彈出和收起,因爲andriod鍵盤收起的時候並沒有像ios一樣會讓input框失去焦點,它依舊在focus狀態。所有andriod需要通過resize事件監聽到鍵盤的彈出和收起。
我把所有的問題都集中在一起了,有需要的對應着問題找代碼中備註就可以了找到具體的bug解決方案,如果還是無法解決或找到,留言給我就可以。

import React, { Component } from 'react'
import { List, InputItem, Toast,Icon,Button,Tag,Flex } from 'antd-mobile';
import $ from  'jquery'

class Input extends Component{
	constructor(props) {
        super(props);
        this.state = {
            isIOS:false,
            clientHeight: 0,
        };
	}
	componentWillMount(){  
 
	}
	componentDidMount(){
        const isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //  ios終端
        this.setState({
            isIOS:isIOS,
        })
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight
        this.setState({ clientHeight })
        window.addEventListener('resize', this.resize)//添加監聽事件
    }
    resize = () => {//監聽andriod鍵盤彈出和收起事件
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight
        if (this.state.clientHeight > clientHeight) { //鍵盤彈出
          this.onKeyboardPopUp()
        } else { //鍵盤收起
          this.onKeyboardPopDown()
        }
    }
    onKeyboardPopUp = () => { //鍵盤彈出要處理的事情
        $('.footer').css({'opacity':'0','display':'none','position':'static'})//解決andriod 固定定位隨着鍵盤彈起的問題
    }
    onKeyboardPopDown = () => {//鍵盤收起要處理的事情
        $('.footer').css({'opacity':'1','display':'block','position':'fixed'})//解決andriod 固定定位隨着鍵盤彈起的問題
    }
    
    onFocus =()=>{
    	const { isIOS } = this.state
        $('.footer').css({'opacity':'0','display':'none','position':'static'})//解決ios固定定位隨着鍵盤彈起的問題
        if(!isIOS){//如果是andriod手機才做處理,ios無需處理
	         let input = $('#input')[0]
	         input.scrollIntoView()   //解決鍵盤彈出頁面不上移,導致input框被遮擋問題
	         window.scroll(0,window.scrollY-50) //防止鍵盤彈出頁面上移到最頂部,讓它保持距離頂部一定距離
        }
    }
	onBlur =(obj)=>{//只有ios鍵盤收起時會觸發失去焦點事件,andriod鍵盤收起不觸發失去焦點事件
        $('.historyBtn,.footer').css({'opacity':'1','display':'block','position':'fixed'})//解決ios 固定定位隨着鍵盤彈起的問題
         window.scroll(0,window.scrollY) //解決鍵盤收起頁面卡住不會落問題
    }
 
	componentWillUnmount() {
        window.removeEventListener('resize', this.resize)//移除監聽事件
    }
	render(){
        return (
          <div className="am-input-control">
		   <input 
		   	  id='input'
		     onBlur={this.onBlur}
		     onFocus = {this.onFocus} 
		   />
		  </div>
		)
	}
}

export default Input;
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章