解决ios 输入后键盘收起,页面卡住不回落、fixed定位元素随键盘弹起。andriod键盘弹起时,输入框被遮盖、fixed定位元素随键盘弹起等bug

4 篇文章 0 订阅
3 篇文章 0 订阅

前言:最近在写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;
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值