当前位置：网站首页 > 热门文章 > 正文

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

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

最近公司开发的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();

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

touchstart

上一篇：小程序面试题小程序面试题前端
下一篇：一分钟学会:swiper实现轮播效果 swiper轮播图怎么使用

相关推荐

恢复软件6款汇总推荐，帮你减轻数据恢复压力!: 在当今数字化生活中，数据丢失的风险如影随形。无论是误删文件、硬盘故障，还是遭遇病毒攻击，丢失的数据都可能给我们带来不小的麻烦。此时，一款优秀的数据恢复软件就成为了挽救数据的关键。今天，为大家汇总推荐...

中兴星星一号刷回官方原版recovery的教程: 【搞科技教程】中兴星星一号的官方recovery也来说一下了，因为之前给大家分享过了第三方的recovery了，之前给大家分享的第三方recovery也是采用一键刷入的方式，如果细心的朋友会发现，之前...

新玩机工具箱，Uotan柚坛工具箱软件体验: 以前的手机系统功能比较单调，各厂商的重视程度不一样，所以喜欢玩机的朋友会解锁手机系统的读写权限，来进行刷机或者ROOT之类的操作，让使用体验更好。随着现在的手机系统越来越保守，以及自身功能的增强，...

三星g906k刷recovery教程_三星g906k中文recovery下载: 【搞科技教程】看到有一些机友在找三星g906k的第三方recovery，下面就来说一下详细的recovery的刷入方法了，因为手机只有有了第三方的recovery之后才可以刷第三方的root包和系统包...

中兴星星2号刷recovery教程_星星二号中文recovery下载: 【搞科技教程】咱们的中兴星星2手机也就是中兴星星二号手机的第三方recovery已经出来了，并且是中文版的，有了这个recovery之后，咱们的手机就可以轻松的刷第三方的系统包了，如果没有第三方的re...

数据恢复软件有哪些值得推荐?这 6 款亲测好用的工具汇总请收好!: 在数字生活中，数据丢失的阴霾常常突如其来。无论是误删工作文档、格式化重要磁盘，还是遭遇系统崩溃，都可能让我们陷入焦虑。关键时刻，一款得力的数据恢复软件便是那根“救命稻草”。今天，为大家精心汇总6...

中兴u956刷入recovery的教程（中兴e5900刷机）: 【搞科技教程】这次主要来给大家说说中兴u956手机如何刷入第三方的recovery，因为第三方的recovery工具是咱们刷第三方rom包的基础，可是很我欠却不会刷，所以太这里来给大家整理了一下详细的...

联想A850+刷recovery教程联想A850+第三方recovery下载: 【搞科技教程】联想A850+的第三方recovery出来了，这个第三方的recovery是非常的重要的，比如咱们的手机要刷第三方的系统包的时候，都是需要用到这个第三方的recovery的，在网上也是有...

工具侠重大更新智能机上刷机一条龙完成: 工具侠是针对玩机的机油开发的一款工具，不管是发烧级别的粉丝，还是普通小白用户，都可以在工具侠上找到你喜欢的工具应用。这不，最新的工具侠2.0.16版本，更新了专门为小白准备的刷机助手工具，以及MTK超...

shift+delete删除的文件找回6种硬盘数据恢复工具: 硬盘作为电脑的重要存储设备，如同一个巨大的数字仓库，承载着我们日常工作、学习和生活中的各种文件，从珍贵的照片、重要的工作文档到喜爱的视频、音乐等，都依赖硬盘来安全存放。但有时，我们可能会不小心用sh...

使用vscode+Deepseek 实现AI编程基于Cline和continue: 尊敬的诸位！我是一名专注于嵌入式开发的物联网工程师。关注我，持续分享最新物联网与AI资讯和开发实战。期望与您携手探寻物联网与AI的无尽可能。这两天deepseek3.0上线，据说编程能力比肩Cl...

详解如何使用VSCode搭建TypeScript环境(适合小白): 搭建Javascript环境因为TypeScript不能直接在浏览器上运行。它需要编译器来编译并生成JavaScript文件。所以需要首先安装好javascript环境，可以参考文章：https://...

使用VSCode来书写你的Jupyter Notebooks: 现在你可以在VScode里面来书写你的notebook了，使用起来十分的方便。下面来给大家演示一下环境的搭建。首先需要安装一个jupyter的包，使用下面的命令安装：pip3install-ih...

使用VSCode模板提高Vue开发效率（vscode开发vue插件）: 安装VSCode安装Vetur和VueHelper插件，安装完成后需要重启VScode。在扩展插件搜索框中找到如下Vetur和VueHelper两个插件，注意看图标。添加Vue模板打...

干货!VsCode接入DeepSeek实现AI编程的5种主流插件详解: AI大模型对编程的影响非常之大，可以说首当其冲，Cursor等对话式编程工具渐渐渗透到开发者的工作中，作为AI编程的明星产品，Cursor虽然好用，但是贵啊，所以咱们得找平替，最好免费那种。俗话说，不...

一周热门

最近发表

首页
收录
顶部