h5输入框调起ios端键盘fixed失效

最新推荐文章于 2024-05-09 09:50:03 发布

欧阳木马

最新推荐文章于 2024-05-09 09:50:03 发布

阅读量691

点赞数

分类专栏： javascript

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<body>
 <div class="footer"> 
<div class="inputBox"> 
<input type="text" placeholder="请输入内容"/>
 </div>
 </div>
 </body> //

.footer{ position: absolute; left: 0; right: 0; bottom: 0; }
 .inputBox { position: absolute; left: 0; right: 0; bottom: 0; }

// js 一定要写

var interval = setInterval(function() {
    document.body.scrollTop = document.body.scrollHeight
}, 500)

原文链接

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

欧阳木马

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

我仰泳一级棒

03-17

2507

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

h5底部输入框被键盘遮挡_总结几个移动端H5软键盘的大坑【实践】

weixin_39733232的博客

10-19

1350

转载链接：https://segmentfault.com/a/11900000221151771、部分机型软键盘弹起挡住原来的视图解决方法：可以通过监听移动端软键盘弹起Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。参数如下。true，表示元素的顶部与当前区域的可见部分的顶部对齐false，表示元素的底部与当前区域的可见部分的尾部对齐Element...

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

iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案

Cool的博客

09-04

6639

做touchweb开发的时候，做头疼的是，电脑上面时候好的，有些手机上面也是好的，个别手机和浏览器出现问题，对于这些，只能慢慢调试，找问题。今天说一下比较老的IOS的问题，那就是“iOS下的 Fixed + Input 调用键盘的时候fixed无效问题”。案例如下 <body class="layout-fixed"> <!-- fixed定位的头部 --&g...

微信端移动端底部组件在点击输入框时，被键盘顶上来，导致输入框遮盖

weCat_s的博客

10-13

2380

问题描述：Vue开发中，当我们相对于父视图的底部布局子控件时，需要用position:fixed，如果页面内容不是很长，没有超出屏幕范围，那就还好，没有问题；一旦超出屏幕范围，当你点击输入框，弹出键盘时，底部固定定位的子控件就会被顶起来。这个问题在iOS端不会出现，在安卓端会出现，原因是键盘加载方式不一样，这里不作详情解答。解决方案：在键盘弹起时，页面高度变小，底部固定定位上升，所以我们只需要在页面高度变小时，隐藏底部子控件，当键盘消失时再显示底部子控件。解决方法：检测浏览器的resize事件，当高度

移动端踩坑之旅-ios下fixed、软键盘相关问题总结

dianfenze8218的博客

09-11

1218

　　最近一个项目掉进了移动端的大坑，包括ios下fixed布局，h5唤起键盘等问题，作为一个B端程序员，弱项就是浏览器的兼容性和移动端的适配(毕竟我们可以要求使用chrome)，还好这次让我学习了一下相关知识。让我们一起来看一下我怎么挣扎出这个大坑的。　　一、背景先看一下要做什么，也就是一个文章评论的版块，下面依次有输入框，点赞，收藏等。大概长下面这个样子： ...

html5 ios js弹出键盘,safari浏览器fixed后，被软键盘遮盖的问题—【未解决】

weixin_29858081的博客

06-07

480

safari浏览器fixed后，被软键盘遮盖的问题，已经有好多人问相关的问题，应该是问的角度不一样，还的再次提出咯。问题描述测试环境：ios 10.2/10.3简单来说就是在html5页面中底部有个fixed的区域，如图在点击输入框的时候，软键盘弹出，遮盖了fixed区域(这里页面整体上移了)，如图但是当你点击“完成”让软键盘收起，再次点击输入框的时候，what？一切正常了～！如图(就是要这样子的...

h5底部输入框被键盘遮挡_微信 H5 页面兼容性解决方案

weixin_39528029的博客

10-25

1056

最近给公司微信公众号，写了微信h5业务页面，总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面，所以下文涉及图片都模糊处理了。1、ios端兼容input光标高度问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。出现原因分析：通常我们...

详解h5页面在不同ios设备上的问题总结

12-13

例如，可以考虑不让输入框被键盘顶起，或者重新设计交互流程，使得用户在键盘出现时仍能方便地进行操作。总之，开发跨平台的H5页面时，尤其是在面对iOS设备的多样性和特异性时，开发者需要具备良好的问题诊断能力...

前端h5页面,嵌入ios app中,打开h5页面,点击输入框,键盘弹起,固定在顶部的标题栏s失效了，也跟随滚动，使用固定定位和粘性定位也不生效

06-03

如果使用固定定位和粘性定位无法实现固定在顶部的标题栏，可能是因为键盘弹起时，iOS App 的 WebView 会自动调整页面高度，导致 CSS 的定位失效。为了解决这个问题，可以在 iOS App 中监听键盘弹起事件，并通过 ...

解决安卓手机在移动端弹出键盘时把底部按钮顶上去问题（vue）fixed失效

weixin_41815063的博客

05-28

747

网上查找的地址链接

（Vue）移动端点击输入框，弹出键盘，底部被顶起问题

weixin_54386178的博客

07-26

1411

**在键盘弹起时，页面高度变小，底部固定定位上升，所以我们只需要在页面高度变小时，隐藏底部footer部分，当键盘消失时再显示底部footer部分就可以解决问题了。解决方法：检测浏览器的resize事件，当高度过小时就可以判定为出现这种情况，这时把定位改成absolute或者直接隐藏掉之类的。** 先在 data 中去定义一个记录高度是属性 data () { return { docmHeight: document.documentElement.clientHeight,

ios 键盘遮挡 html,页面底部input被弹出来的键盘遮挡(iOS系统)—附解决方案

weixin_28925169的博客

06-07

627

项目上要做一个留言回复的框.类似这种用一个div套在input外面, 点击按钮时, 这个div出现, 位于页面底部. 并且input获得焦点, 自动弹出系统键盘.但是, 在开发的时候发现,在iOS系统中这个div总是被键盘遮住, 曾经使用了垫高div框的办法, 天真的以为能够使它往上挪, 但是发现没有用, 需要手动往上拉才能出来.查了很久, 看网上很多人都死在了这个问题上.比较靠谱的答案在[知乎]...

IOS遇到的几个H5坑、h5键盘弹起遮挡输入框的处理