Dream博客 - H5软键盘安卓Ios处理部分方案

一、预导

最近项目中写 H5 遇见了软键盘兼容性问题，其实在Google和Baidu已经百花齐放了 😆！
其实很多也是参考了网上，考虑到ios和安卓在不同情况下软键盘的兼容，其实在ios下只需要判断Input是否聚焦就可以了，因为在ios聚焦就会弹软键盘，失焦软键盘就会收回，但是在安卓下表现并不会一致，每个手机厂商甚至都不一样，但大部分都是通过监听resize窗口调整大小就会触发，安卓的软键盘弹出以及收缩就会触发这个事件，其实就可以通过先判断系统去做不同的判断就行了

二、判断机型

这里没必要封装方法，执行一次就够了，封装方法每次去判断没有必要，增加消耗

TypeScript 复制代码

const phoneSystem = navigator.userAgent;
const isAndroid =/android/i.test(phoneSystem);   // android终端
const isIOS = /iphone|ipad|ipod/.test(phoneSystem); // ios设备

三、Android处理

vue例子

Vue 复制代码

import {onMounted,onUnmounted} from 'vue'
    // 当前可视高度
const originHeight = document.documentElement.clientHeight || document.body.clientHeight;     
  const handleResize = () => {                
      // 当前窗口可视高度变化就代表软键盘变化
     const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
         if (originHeight > resizeHeight) //软键盘弹出;
         if (originHeight === resizeHeight) // 软键盘收起    
     }   
   onMounted(() =>{
     if (isAndroid) window.addEventListener('resize', handleResize, false)   
   })   
   onUnmounted(() => {
         if (isAndroid) window.removeEventListener('resize', handleResize)
    })

React例子

React 复制代码

import { useEffect } from 'react'; 
    // 省略handleResize方法
      useEffect(()=>{
         if (isAndroid) window.addEventListener('resize', handleResize, false)
            return ()=>{
             if (isAndroid) window.removeEventListener('resize', handleResize)
            }
         },[])

原生Js

JavaScript 复制代码

// 监听 DOMContentLoaded 事件
  document.addEventListener('DOMContentLoaded', function() {
    handleResize()
});

四、Ios处理

ios处理就很简单只需要对当前input元素focus和blur事件做处理就行，这边采用统一的方式

javascript 复制代码

  const handleFocus = ()=>{
  // 当前获得输入焦点的元素，可以对这个元素做操作
      const focusedElement = document.activeElement;
    //这里就相当于软键盘弹出
  }
  const handleBlur = ()=>{
       //这里就相当于软键盘收起
  }
   onMounted(() =>{
     if (isIOS){
        window.addEventListener('focus', handleFocus, false)  
        window.addEventListener('blur', handleBlur, false)   
      }
   })   
   onUnmounted(() => {
         if (isIOS){
         window.removeEventListener('focus', handleFocus)
             window.removeEventListener('focus', handleBlur)
         }
    })

文章最后更新于 2024-12-22 23:36

前端

#Vue #React #JavaScript #TypeScript

H5软键盘安卓Ios处理部分方案

本博客遵守:署名-非商业性使用-相同方式共享 4.0 国际许可协议

转载文章请注明文章出处：

评论一下吧！