IOS虚拟键盘弹出后,弹窗的按钮点击不起作用,不会触发click事件

背景

讨论区项目的回复框,使用的是Popup和TextArea做,布局如下图,希望键盘弹出时候,回复框可以紧贴键盘,这点实现起来比较简单,监听resize事件,动态修改popup的这题内容的top值即可,top的计算是document.body.clientHeight - popup中主体内容的高度即可
在这里插入图片描述
在这里插入图片描述

问题:

ios的键盘弹起时候,“发送”按钮的点击不起作用,“关闭”按钮不起作用,点击蒙层不起作用,就是不会触发click事件
在这里插入图片描述

暂时不知道原因,有大佬知道可以告知一下

解决方案:

键盘弹出时候,给按钮和蒙层添加touchstart事件代替click事件即可,重点逻辑:
1. 问题出在ios环境,所以需要是在ios环境才触发touchstart回调,否则直接return
2. 问题出在键盘弹起时候,需要也就是textarea聚焦时候才处理,否则直接return

主要代码图下:

  • 函数isIos判断是ios环境
  • window.visualViewport.addEventListener(‘resize’, handler)监听键盘弹出收起时候,动态设置popup定位
  • processMaskListener是为蒙层添加touchstart事件
  • 为TextArea添加onBlur和onFocus事件,用于判断是否聚焦
  • 为关闭按钮和发送按钮添加onTouchStart事件
useEffect(() => {
  /** 初始化监听 */
  window.visualViewport.addEventListener('resize', handler)
  processMaskListener()
}, [])

/** 判断是ios环境 */
const isIos = () => {
  return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
}

/** 蒙层添加touchstart事件 */
const processMaskListener = () => {
  status = ""
  const mask = document.getElementsByClassName('adm-mask')[0]
  if (!mask) { return }
  mask.addEventListener('touchstart', () => {
    if (isIos() && status === "focus") {
      maskClickWillDo()
    }
  }, false)
}

const  handler = () => {
  const popTop = document.body.clientHeight - document.getElementsByClassName('pop-input')[0].parentNode.clientHeight
  setPopStyle(popTop)
}

return (
  <React.Fragment>
    <Popup
      className='reply-pop'
      destroyOnClose={true}
      visible={visible}
      onMaskClick={() => maskClickWillDo()}
    >
      <div className="pop-input">
        <div className="input-title">
          <img
            className="input-close"
            alt=""
            src={closeImg}
            onTouchStart={() => {
              if (isIos() && status === "focus") {
                maskClickWillDo()
              }
            }}
            onClick={() => maskClickWillDo()}
          />
          <div
            className={inputValue ? 'commit' : 'commit no-commit'}
            onTouchStart={() => {
              if (isIos() && status === "focus") {
                onsole.log('%c [ onTouchStart执行了 ]-96', 'font-size:13px; background:pink; color:#bf2c9f;', )
                prop.onSendFunc(inputValue)
              }
            }}
            onClick={() => {
              console.log('%c [ onClick执行了 ]-101', 'font-size:13px; background:pink; color:#bf2c9f;', )
              prop.onSendFunc(inputValue)
            }}
          >
            {prop.btnText ? prop.btnText : "发送"}
          </div>
        </div>
        <div className='btn-style'>
          <TextArea
            id='textId'
            ref={inputRef}
            value={inputValue}
            rows={5}
            placeholder={prop.answerText ? prop.answerText : "我也来说两句.."}
            onChange={(e) => {
              setInputValue(e)
            }}
            onBlur={() => status = "blur"}
            onFocus={() => status = "focus"}
          />
        </div>
      </div>
    </Popup>
  </React.Fragment>
)

键盘弹起时候,点击发送按钮
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/532794.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ONERugged车载平板电脑厂家丨工业车载电脑优势体现丨3年质保

作为现代社会中必不可少的出行工具&#xff0c;汽车不仅仅是代步工具&#xff0c;更是我们生活中的重要一部分。而在如此多功能的汽车内&#xff0c;一款高可靠性、适应不同行业应用的车载平板电脑成为了当下的热门选择。ONERugged车载平板电脑以其卓越的品质和强大的功能而备受…

自动化 单元测试Test

XCTest测试框架(单元测试XCTests、性能测试XCPPerformanceTests、用户界面测试XCUItests) 单元测试XCTests&#xff1a;测试应用中事件或逻辑是否预期工作。 用户界面测试XCUItests&#xff1a;测试用户与应用的UI交互(如点击按钮、滑动屏幕)。 性能测试XCPPerformanceTests&am…

电池电量监测系统设计 单片机+LabVIEW+Matlab+Protues+Keil程序

目录 前言 提供 软件 系统展示 1.放电试验及其处理 2.硬件系统原理图 3.下位机程序 4.显示 5.上位机界面 6.上位机程序 7.文档 资料下载地址&#xff1a;电池电量监测系统设计 单片机LabVIEWMatlabProtuesKeil程序 前言 这套系统首先使用Matlab分析获得了电压…

【opencv】示例-essential_mat_reconstr.cpp 从两幅图像中恢复3D场景的几何信息

导入OpenCV的calib3d, highgui, imgproc模块以及C的vector, iostream, fstream库。定义了getError2EpipLines函数&#xff0c;这个函数用来计算两组点相对于F矩阵&#xff08;基础矩阵&#xff09;的投影误差。定义了sgn函数&#xff0c;用于返回一个双精度浮点数的符号。定义了…

系统架构设计图

首先明确应用架构的定义&#xff0c;从百度百科上即可了解到何为应用架构&#xff1a; 应用架构&#xff08;Application Architecture&#xff09;是描述了IT系统功能和技术实现的内容。应用架构分为以下两个不同的层次&#xff1a; 企业级的应用架构&#xff1a;企业层面的应…

git bash用法-批量修改文件名

在win系统上安装git bash可以使用命令行模式操作&#xff0c;比较方便 1.原始文件名 2.代码 for file in *3utr*; do mv "$file" "$(echo "$file" | sed s/3utr/5utr/)"; done3.修改后的文件名

基于FPGA的HDMI设计导航页面

FPGA使用HDMI更多时候用于传输图像数据&#xff0c;并不会传输音频数据&#xff0c;因此以下文章均采用DVI接口协议&#xff0c;HDMI与DVI的视频传输协议基本一致&#xff0c;区别也很小。 首先需要了解HDMI的来源&#xff0c;以及物理接口类型以及引脚信号&#xff0c;最后对几…

自动化测试-web(弹窗/滚动条/鼠标/等待等操作)

一、弹窗 为什么要处理弹窗&#xff1f; 如果页面操作过程中&#xff0c;有弹窗出现&#xff0c;不处理&#xff0c;无法继续对页面操作。 弹窗类型&#xff1a; js原生弹窗&#xff1a; 警告框、输入框、提示框&#xff0c;这些必须处理 如何处理&#xff1a; 1&#xff0…

HarmonyOS实战开发-设备管理合集(非系统特性)

介绍 本示例集合设备管理相关&#xff08;非系统特性&#xff09;不需要复杂功能展示的模块&#xff0c;展示了各个模块的基础功能&#xff0c;包含&#xff1a; ohos.batteryInfo (电量信息)ohos.charger (充电类型)ohos.deviceInfo (设备信息)ohos.power (系统电源管理)oho…

Windows上面搭建Flutter Android运行环境

Flutter Android环境搭建 电脑上面安装配置JDK电脑上下载安装Android Studio电脑上面下载配置Flutter Sdk &#xff08;避坑点一&#xff09;下载SDK配置对应的环境变量 到path 电脑上配置Flutter国内镜像运行 flutter doctor命令检测环境是否配置成功创建运行Flutter项目&…

openssl3.2 - exp - zlib

文章目录 openssl3.2 - exp - zlib概述笔记命令行实现程序实现备注 - 压缩时无法base64压缩时无法带口令压缩实现 - 对buffer进行压缩和解压缩测试效果工程实现main.cppCOsslZlibBuffer.hCOsslZlibBuffer.cpp总结END openssl3.2 - exp - zlib 概述 客户端和服务端进行数据交换…

数据库的负载均衡,高可用实验

一 高可用负载均衡集群数据库实验 1.实验拓扑图 2.实验准备(同一LAN区段)&#xff08;ntp DNS&#xff09; 客户端&#xff1a;IP&#xff1a;192.168.1.5 下载&#xff1a;MariaDB 负载均衡器&#xff1a;IP&#xff1a;192.168.1.1 下载&#xff1a;keepalived ipvsadm I…

鸿蒙实战开发-如何实现选择并查看文档与媒体文件

介绍 应用使用ohos.file.picker、ohos.multimedia.mediaLibrary、ohos.file.fs 等接口&#xff0c;实现了picker拉起文档编辑保存、拉起系统相册图片查看、拉起视频并播放的功能。 效果预览 使用说明&#xff1a; 在首页&#xff0c;应用展示出最近打开过的文档信息&#xf…

【JavaWeb】Servlet与过滤器

目录 ServletServlet做了什么JSP与Servlet的关系主要Servlet API介绍如何创建ServletServlet中主要方法ServletRequestServletResponseServletConfig Servlet生命周期Servlet创建Servlet部署与运行 ServletConfig类ServletConfig类的三大作用 ServletContext类ServletContext类…

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之八 简单视频素描效果

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之八 简单视频素描效果 目录 Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之八 简单视频素描效果 一、简单介绍 二、简单指定视频某片段快放效果实现原理 三、简单指定视频某…

web安全学习笔记(9)

记一下第十三课的内容。 准备工作&#xff1a;在根目录下创建template目录&#xff0c;将login.html放入其中&#xff0c;在该目录下新建一个reg.html。在根目录下创建一个function.php 一、函数声明与传参 PHP中的函数定义和其他语言基本上是相同的。我们编辑function.php …

stm32f103c8t6学习笔记(学习B站up江科大自化协)-看门狗【WDG】

硬件部分 一、看门狗简介 看门狗-WDG&#xff08;watchdog&#xff09; 看门狗可以监控程序的运行状态&#xff0c;当程序因为设计漏洞、硬件故障、电磁干扰等原因&#xff0c;出现卡死或跑飞现象时&#xff0c;看门狗能及时复位程序&#xff0c;避免程序陷入长时间的罢工状态…

相机参数的意义

相机标定的意义&#xff1a; 相机标定&#xff1a;使用带有pattern的标定板来求解相机参数的过程&#xff1b;用一个简化的数学模型来代表复杂的三维到二维的成像过程&#xff1b;相机参数包括&#xff1a;相机内参&#xff08;焦距等&#xff09;&#xff0c;外参&#xff08…

为什么需要SOCKS代理?

在数字化时代&#x1f310;&#xff0c;随着网络安全威胁的不断演进和增加&#xff0c;保护个人隐私和数据安全成为了互联网用户的一大挑战&#x1f6e1;️。在寻求增强在线安全和隐私的解决方案时&#xff0c;SOCKS代理成为了一个关键的技术工具&#x1f511;。本文旨在详细探…

代码随想录:栈与队列4-6

20.有效的括号 题目 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一…