打开 iOS 键盘时删除类（HTML/JS/CSS）答案

【问题标题】：Removing class when iOS keyboard is open (HTML/JS/CSS)打开 iOS 键盘时删除类（HTML/JS/CSS）
【发布时间】：2021-10-14 02:28:13
【问题描述】：

当我通过 JS/JQuery 在 iOS 中点击 textarea 字段时，我想删除我的 .textareafooter 类。

解释：

我的 .textareafooter 是我的容器正下方的白色 DIV，其中 textarea 有一个 bottom-boder-radius 嵌套在黑色背景的 DIV 中。

如果键盘弹出，那么我在键盘上看到的页脚看起来很糟糕。

为了说明我的问题，我快速对下面这张图片进行了 Photoshop 处理。

提前谢谢你

【问题讨论】：

标签： javascript ios keyboard

【解决方案1】：

尝试排列 CSS

textarea:has(:focus) + .textareafooter


textareaParent:focus-within .textareafooter


aspect-ratio

或 JavaScript

textarea.addEventListener('focus', ...)


textarea.addEventListener('blur' ...)

【讨论】：

【解决方案2】：

您必须先检查设备是否为 Iphone。您可以使用Navigator Api 来做到这一点。然后从 textArea 中删除该类。

let textArea = document.querySelector('.textareafooter')

textArea.addEventListener('focus', () => {
    
    //Check if it is an iphone device
    if (navigator.userAgent.indexOf('iphone') > - 1) {
        
        //Remove the class
        
        textArea.classList.remove('textareafooter')
    }
})

【讨论】：