h5遇到的坑

目录

判断是安卓还是iphone

input输入框在安卓无法获取收起键盘事件

---

• 判断是安卓还是iphone

<template>
    <div v-if="showReturnButton()"></div>
</template>
<script>
import { ref } from "vue";

const isAndroid = ref(false);
let u = window.navigator.userAgent;
isAndroid.value = u.indexOf("Android")>-1 || u.indexOf("Linux");

function showReturnButton(){
    return isAndroid.value
}
</script>

• input输入框在安卓无法获取收起键盘事件

<template>
<div :style="height: scrollerHeight,marginBottom:showKeyBoard?'200px':'0'">
</div>
</template>

<script lang="ts" setup>
import { onMounted,ref } from 'vue';

const scrollerHeight = ref('100%')
const showKeyBoard = ref(false)

onMounted(()=>{
    const originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
    window.onresize=()=>{
        return (()=>{
            //键盘弹起与隐藏都会引起窗口的高度发生变化
            const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
            if(resizeHeight - 0 < originalHeight - 0){
                //当软键盘弹起，在此处操作
                document.querySelector('body').setAttribute('style','height:' + resizeHeight + 'px;');
                scrollerHeight.value = resizeHeight  + 'px;'
                showKeyBoard.value = true;
            }else{
                //当软键盘收起，在此处操作
                document.querySelector('body').setAttribute('style','height:100%');
                scrollerHeight.value = '100%'
                showKeyBoard.value = false;
            }
        })();
    };
});
</script>