h5页面在ipad设备中点击input框消失的问题

摸水的_鱼

于 2024-01-17 16:19:28 发布

阅读量374

点赞数 8

文章标签： html5

本文链接：https://blog.csdn.net/o_neboy/article/details/135653493

版权

作者在开发H5页面时遇到问题，IPad设备点击input元素后元素消失，经调查发现是由于margin导致的。通过将margin替换为padding解决了这个问题。

摘要由CSDN通过智能技术生成

最近在写一个h5页面，发现在ipad设备中，点击input后，元素会消失
在这里插入图片描述

经排查发现，只有点击margin边距时才会出现，将margin换成padding后解决

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

摸水的_鱼

关注关注

8
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

解决 - 移动端(H5) ios 在点击input输入框,弹起软键盘后,顶部输入框失效的问题

我仰泳一级棒

03-17

2484

问题: 在项目开发过程中发现这个问题,在安卓下是正常的,ios固定定位就会失效,在网上看了许多ios兼容的博客,都没有效果,卡了很久, ios 的软键盘弹出后,会把页面撑高.他就不在原来的位置定位了后面同事提了个思路,当我点击搜索框的时候,会弹出软键盘,往上滑的话,搜索框也会跟着滑走,那我们就在滑动上做文章.往上滑的时候(或者点击屏幕的时候) 让软键盘消失就ok了,那么页面就不会被撑高了 vue开发代码 mounted () { document.body.addEventListener('to

React 实战 | H5页面在苹果IOS系统点击事件失效——软键盘的“锅”

qq_35536883的博客

09-05

1598

最近在开发一个用react开发的微信H5页面。遇到了一个bug，就是当软键盘弹出再收起时，软键盘位置的点击事件失效。刚开始以为是onclick的锅，但是换成onTouchStart还是没有好。而且iphone7 Plus没问题，但是iphone7就可以复现这个bug。原因：在IOS下，点击页面中比较靠下的input时，软键盘弹出，页面会上移，document.body.scrollOffs...

参与评论您还未登录，请先登录后发表或查看评论

iOS bug 之 H5 页面没有弹出提示框

weixin_33985679的博客

01-11

984

描述：在安卓上有提示框，但是在iOS上没有提示框。 step 1: 失误，是我没有在正确的位置设置网址。 step 2: 修改之后，测试页能弹出提示框，但是正式的页面没有提示框。 step 3: 我输入一个错误的数字，不是手机号码，看见界面一闪，是不是iOS 不支持弹出页面再弹出页面。 step 4: 我在安卓上测试了下网址，在浏览器上输入网址，能弹出提示框...

ios键盘弹出之后页面页面会被强制滚动消失

sinat_39049092的博客

04-17

1022

ios键盘弹出之后页面页面会被强制滚动消失 ios在h5输入框聚焦之后，通常键盘弹起之后再滑动页面就会出现页面内容消失在顶部的问题。实际上解决方案不能从css布局方案考虑，因为这是ios系统的一个特性，所以我最终通过尝试得到的完美解决方案是： window.ontouchmove = function() { $('input').blur(); }; 通过监听页面滚...

学习总结——h5搜索框input回车自动搜索，及IOS X及以上h5 input页面切换后显示内容丢失fix

u012439689的博客

07-07

3823

搜索input实现，搜索框ios xr下页面跳转后query丢失解决

超详细讲解H5移动端适配

最新发布

程序员成长指北

09-08

1958

大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言移动互联网发展至今，各种移动设备应运而生，但它们的物理分辨率可以说是五花八门，一般情况UI会为我们提供375尺寸的设计稿，所以为了让H5页面能够在这些不同的设备上尽量表现的一致，前端工程师就不得不对页面进行移动端适配了。「如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者前置知识在学习移动...

js手机键盘遮挡_彻底解决H5中键盘遮挡输入框的问题

weixin_34406909的博客

01-12

1231

问题描述在移动端 H5 开发中，我们经常会碰到输入框固定在页面底部的布局情况，比如聊天应用，文章评论等。当我们点击输入框输入文字时，系统会弹出虚拟键盘以便输入内容，这个时候会有几种情况出现：输入框随着页面移动到键盘的上面，显示正常；输入框被键盘挡住，收起键盘，再次点击输入框后和情况1一样；输入框被键盘挡住，后续的收起/打开都依然是挡住的；输入框没有被键盘挡住，但收起键盘后页面不会回落；。。。解决方...

H5开发：常见H5开发兼容问题

Generon的博客

05-25

8506

1、安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也

常见的移动端H5页面开发遇到的坑和解决办法

qq_35859392的博客

04-17

884

转过来，平时看看。虽然还有很多问题至今无解。比如：华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏。！！ 1、安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的9...

网易高工手打：中高级前端必须注意的40条移动端H5坑位指南

pig_html的博客

02-03

773

前言不知不觉在网易已有三年半，占了一半时间都在与移动端打交道，整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。Android和iOS各显神通，Android的系统版本和屏幕分辨率多得难以一招兼容，iOS的顽固标准和未知特性多得难以快速掌握。三年半沉淀通过本文记录下所遇到的坑位，或许有些坑位还未遇到，但本文记录的40条坑位绝对能让同学们少走很多弯路，特别是前端小白。为了减少废话提高本文质量，对以下内容做一些约定。提及的安卓系统包括A

H5项目常见问题及注意事项

feitianlian的博客

02-23

1255

Meta基础知识： H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 //一、HTML页面结构 "viewport" content="width=device-width,

关于viewport的一些问题

weixin_30600503的博客

01-13

200

viewport并非只是ios上的独有属性，在android、winphone上同样也有viewport。它们要解决的问题是相同的，即无视设备的真实分辨率，直接通过dpi，在物理尺寸和浏览器之间重设分辨率，这个分辨率和设备的分辨率无关。比如，你拿个3.5寸-320 * 480的iphone3 gs、3.5寸-640 * 960的iphone4或者9.7寸-1024*768的ipad2，虽...

H5 移动端测试方法

tyyua_21的专栏

11-09

2024

一.功能测试 1、关注页面请求。对于每个页面，要查看发送的请求是否正确，请求的接口是否有重复，接口请求是否正确返回等。可通过chrome中自带的开发工具查看网络请求。关注是否有冗余接口请求，是否有不必要的重复接口刷新请求。冗余和重复的接口请求会导致流量浪费和响应速度变慢。 2、关注application cache （http://www.html5rocks.com/zh/tutorials/appcache/beginner/）, local storage（http://www.ht...

h5页面在不同ios设备上的问题

weixin_39882191的博客

04-16

444

1、日期问题对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别。时间格式化的时候，在浏览器端处理好好的，到了手机端，就变成NAN，或者null，这种情况，是ios系统不能转化这种类型的时间。 let date = new Date('2019-02-28 18:33:24'); // null` 解决方案是，转成 yyyy/mm/dd hh:mm:ss 这种格式就可以...

解决ios键盘弹出input框失效问题

qq_41851047的博客

07-04

1332

document.body.addEventListener('focusout', function () { window.scrollTo(0, 0); })

移动端H5页面返回并且刷新页面（BFcache）

达拉崩巴斑得贝迪卜多比鲁翁_

05-07

1102

项目中的需求：点击浏览器中的返回按钮，要让页面重新加载资源。因为这部分的资源每次去加载的内容都不一样，如果返回的时候，还是看到原先的内容，那做这个内容块的意义就很小了；而如果用户看完了这部分内容，再返回来的时候，这个地方换成了新的内容，这样就能体现这部分的价值了。而对于浏览器来说，大部分浏览器的返回是直接使用缓存的，不会执行任何的javascript代码。原因：部分浏览器在后退时不会触发onload事件，這是HTML5世代浏览器新增的特性之一——Back-Forward Cache(简称bfcache)

HTML列表滑动出现删除块点击删除（平板手机适用）

qq_51247669的博客

06-15

415

HTML列表滑动出现删除块点击删除（平板手机适用）

记录使用浏览器扫码功能（pad 笔记本手机）

weixin_52721089的博客

04-07

415

引用前端实现很哇塞的浏览器端扫码功能🌟 体验地址 https://dragonir.github.io/h5-scan-qrcode 完整代码 https://github.com/dragonir/h5-scan-qrcode 兼容 ❗ 即使使用了 adapter，getUserMedia API 在部分浏览器中也存在不支持的。 ❗ 低版本浏览器（如 iOS 10.3 以下）、Android 小众浏览器（如 IQOO 自带浏览器）不兼容。 ❗ QQ、微信内置浏览器无法调用。 ❗❗❗❗❗❗❗❗❗❗❗

WEB前端开发-移动端兼容性问题汇总