百度360必应搜狗淘宝本站头条
mqtt服务器xftp6vscode使用技巧mybatiscollectionkeyerror
当前位置：网站首页 > 热门文章 > 正文

最近遇到的IPhone手机移动端H5页面Input输入框兼容问题总结

bigegpt 2024-10-12 06:29 4 浏览

最近公司开发的app采用混合开发模式，前端写的H5页面给Android与iOS 调用，iOS遇到了很多坑，现将Input输入框遇到的问题及网上找到的解决方法总结如下：

1、弹出的键盘挡住Input输入框

弹出的键盘挡住Input输入框


这个问题不一定每个iPhone手机都会出现，但是一般使用了苹果第三方输入法的手机都重现了这个问题，感谢万能的搜索引擎，我找到了下面这段代码解决了这个问题

const input = document.getElementsByTagName('input')[0];

let interval;

input.onfocus = () => {

interval = setInterval(() => {

input.scrollIntoViewIfNeeded();

}, 1000);

};

input.onblur = () => {

clearInterval(interval);

};

2、点击Input输入框外面的区域弹出的键盘不隐藏

这个问题在安卓机上面没有出现过，具体原因是click不能触发iPhone的事件，需要用触屏事件来触发一次。

页面加入下面的js代码后解决了这个问题

function BlurOrFocus(){

var obj = document.getElementsByTagName('input')[0];

var docTouchend = function(event){

if(event.target!=obj){

setTimeout(function(){

obj.blur();

document.removeEventListener('touchend',docTouchend,false);

},100);

}

}

if(obj){

obj.addEventListener('touchstart',function(){

document.addEventListener('touchend',docTouchend,false);

},false);

}

}

BlurOrFocus();

一起学习，互相督促进步，欢迎关注我~

相关推荐

Redis集群对比:主从复制、哨兵模式、Cluster一文看懂所有优缺点

在分布式系统中，Redis作为高性能的内存数据库，其集群方案的选择直接影响到系统的稳定性、可用性和扩展性。本文将全面对比Redis的三种主流集群方案：主从复制、哨兵模式和Cluster模式，帮助开发者...

redis的主从复制，读写分离，主从切换

当数据量变得庞大的时候，读写分离还是很有必要的。同时避免一个redis服务宕机，导致应用宕机的情况，我们启用sentinel(哨兵)服务，实现主从切换的功能。redis提供了一个master,多个sl...

# Redis 入门到精通(九)-- 主从复制(3)

#Redis入门到精通（九）--主从复制（3）##一、redis主从复制-常见问题（1）###1、伴随着redis系统的运行，master的数据量会越来越大，一旦master重启...

redis - 主从复制（Redis主从复制时序图）

1引言在上一篇文章中，我们了解了Redis两种不同的持久化方式，Redis服务器通过持久化，把Redis内存中持久化到硬盘当中，当Redis宕机时，我们重启Redis服务器时，可以由RDB文件或AO...

# Redis 入门到精通(九)-- 主从复制(2)

#Redis入门到精通（九）--主从复制（2）##一、redis主从复制--数据同步阶段注意事项###1、数据同步阶段master说明1）如果master数据量巨大，数据同步阶段应...

Redis主从复制（redis主从复制主节点挂了）

介绍Redis有两种不同的持久化方式，Redis服务器通过持久化，把Redis内存中持久化到硬盘当中，当Redis宕机时，我们重启Redis服务器时，可以由RDB文件或AOF文件恢复内存中的数据。不过...

深入解析 Redis 集群的主从复制实现方式

在互联网大厂的后端开发领域，Redis作为一款高性能的内存数据库，被广泛应用于缓存、消息队列等场景。而Redis集群中的主从复制机制，更是保障数据安全、实现读写分离以及提升系统性能的关键所在。今...

Redis主从架构详解（redis主从架构高可用如何实现）

Redis主从架构搭建Redis主节点配置创建主节点目录（/opt/redis-master），复制redis.conf到该目录下，redis.conf配置项修改#后台启动daemonizeyes...

抖音“四大包塘战神”:承包了全网的快乐

在抖音钓鱼垂类领域，"包塘战神"军团正掀起一场黑色幽默风暴。空军华、大表坑、李赔光、透心良四位创作者，以承包鱼塘为舞台，用连续翻车的钓鱼直播构筑起流量奇观。当钓鱼佬在抖音集体转型喜剧人...

ORACLE 11G RAC 安装-通过VM配置共享磁盘

简介：在自己的电脑上通过VM软件搭建Oracle11GRAC，通过修改VM的参数文件来实现磁盘共享！目标：搭建RAC环境实现：使用VMwareWorkstation8.0.0+ORACLE...

Linux操作系统安全配置（linux系统安全配置包括）

一、服务相关命令systemctlenable服务名#开机自启动systemctldisable服务名#禁用开机自启动systemctlstop服务名#停止服务systemctls...

关于Linux性能调优中网络I/O的一些笔记

写在前面和小伙伴分享一些Linux网络优化的笔记,内容很浅，可以用作入门博文内容结合《Linux性能优化》读书笔记整理涉及内容包括常用的优化工具(mii-tool,ethtool,ifconfig,i...

从 Sonatype Nexus Repository Manager 迁移到 Artifactory

1.Nexus1.1下载下载链接：https://help.sonatype.com/repomanager3/product-information/download/download-archiv...

Ubuntu20安装zabbix5.0企业监控系统亲测教程

前言示例主机：zabbix10.0.100.10，将安装在UbuntuServer上教程说明：因使用官方教程无法安装成功，所以本教程与官方教程有所不同安装前提：已安装UbuntuServer2...

Linux内核设计与实现—进程管理（linux内核程序设计）

进程进程就是处于执行期的程序(目标码存放在某种存储介质上)。进并不仅仅局限于一段可执行程序代码(Unix称其为代码段，textsection)。通常进程还要包含其他资源，像打开的文件，挂起的信号，...

一周热门
最近发表
标签列表