手机网页h5输入框input在ios被键盘顶起，解决办法

最新推荐文章于 2021-05-10 15:49:14 发布
最新推荐文章于 2021-05-10 15:49:14 发布
阅读量952 收藏
点赞数
分类专栏： js 框架 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxy964666897/article/details/103391269
版权
js 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
框架
3 篇文章 0 订阅
订阅专栏

如下代码：

window.addEventListener('focusout', function() {

    window.scrollTo(0, window.pageYOffset ||

        document.documentElement.scrollTop ||

        document.body.scrollTop)

})

wxy964666897
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
键盘遮挡问题
03-29
我自己又做了一遍 ，感觉还是自己动手能理解思路
移动端H5文本框获取焦点唤起键盘时，fixed或absolute定位的元素被键盘顶上去的问题解决方案
艾欢欢的博客
12-10 1938
场景 看下面两张图，文本框（ input 或 textarea ）获取焦点时，手机自带的键盘会被唤起，从而导致视口高度变小，从而导致处于 fixed 定位且设置 bottom 属性的元素，会被键盘顶上去，浮于键盘上方。（由于手机内部机制不同，仅安卓出现这种问题） 解决方案 思路 监听当前视口的变化： 当视口大小发生改变时，判断变化后的视口高度是否小于初始的窗口高度，是则隐藏相关元素；反之，显示相关元素 主要代码 const WIN_HEIGHT = window.innerHeight window
关于移动端输入法遮住input输入框相关问题
qq_34673379的博客
07-03 266
法一 也是主流方法，但是可能我们项目里的输入法没有占据屏幕也就是clientHeight ，因此失败。 Element.scrollIntoView() //使当前的元素滚动到浏览器的可视区域内 Element.scrollIntoViewIfNeeded() //若当前元素已经在浏览器的可视区域内则不滚动否则滚动 法二 改变根元素的高度： 在vue里注册一个全局方法，需要在每个...
移动端底部input被弹出的键盘遮挡的解决办法
jiajunmiku的博客
07-05 5906
input输入框是通过position定位一直放在页面底部，当点击input进行输入的时候，部分机型（尤其是ios系统）底部input被弹出的键盘遮挡，如何解决这个问题呢？在解决这个问题的时候，有试过下面这种方法:在input的focus事件中，开启一个定时器，然后每隔300毫秒进行一次document.body.scrollTop=document.body.scrollHeight的调整，运行...
ios下 input输入框的蓝色光标 未居中且高度过高
yezi_Z的博客
05-27 470
调试时用的是安卓手机，由于安卓input输入框的光标没有ios那么明显，所以一直没有发现这个问题。 产生原因 ： 为了保证标题 和 input 框中的文字垂直居中，使用了heigh和line-height，导致整个光标高度变成了输入框的高度。如果不小心将 input 的height 或者 line-height 设置了， 可能就会导致蓝色光标异常显示的情况。 设计稿规则是 ： 左侧是标题，inpu...
ios输入框的坑(软键盘弹出不灵敏、输入法影响弹出高度)
weixin_42289080的博客
03-05 1146
参考地址： https://segmentfault.com/a/1190000018959389 https://blog.csdn.net/github_37533433/article/details/66471962 1.首先，是这样的布局：父容器里面放一个输入框 和一个按钮 思路是：父容器fixed定位，bottom为0，left为-100%；flex布局；在其他事件触发输入框出现的时候（例如一个评论的icon），父容器 left值变为0，被软键盘顶上来。 <div class="ipt
input输入后页面顶上去了 ios_iOS唤起键盘页面被顶上去且无法自动回退带来的问题及解决方案...
weixin_29375669的博客
01-17 1606
一、问题描述：问题1：iOS唤起软键盘，将页面顶出屏外，且无法自动回退到正常位置详细描述：在开发H5页面时，会遇到这样的问题，在iPhone访问有提交按钮fixed在底部页面，且页面中有input框等可录入信息的元素时，点击input框唤起键盘，输入信息，这时候页面会被顶出屏外，且在点击键盘的完成按钮收起键盘时，页面不会回到原来正常的位置。问题2：点击fixed在底部的提交按钮无反应详细描述：遇到...
input标签输入汉字高度变高的解决方法
lipei_csdn的博客
05-10 1244
当往input输入汉字时，input的高度变高，解决方法是设置line-height的高度等于input的高度。 参考：input输入框中光标高度的变化问题_html/css_WEB-ITnose (gxlcms.com)
记录H5页面IOS中input输入框失去焦点后，键盘隐藏
baidantop的博客
01-16 1万+
//问题描述：安卓下无此问题，在ios自带的浏览器中，H5页面在input输入获取焦点后键盘弹出，随便触碰一个地方要使键盘隐藏 //解决方案：如下 jQuery("body").on("touchend", function() { //body上面绑定touchend事件 jQuery(".input_box").each(function (i, v) { //自定义一个.input
vue 移动端input被输入法键盘挡住解决方法
热门推荐
修炼中的小妖怪
04-02 1万+
项目里的报名表单中，在没有顶部也没有底部的情况下，正常排版没有用flex布局，当触焦input时，输入法档住了，如下图： 解决方法： 1.先给最外层的div一个ID取名比如 id="apply"如下图： 2.定义一个class: .focusState {position: absolute;} 3.利用监听键盘的收起展开事件来添加移除定义的focusState 样式 created(){...
解决ios h5 input输入框被输入法弹出一块区域的问题
08-27
今天小编就为大家分享一篇解决ios h5 input输入框被输入法弹出一块区域的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
h5 ios输入框和键盘的兼容性优化指南
01-05
起因 h5的输入框引起键盘导致体验不好，目前就算微信、知乎、百度等产品也没有很好的技术方案实现，尤其底部固定位置的...在聚焦事件触发调起原生键盘时，在ios部分机型(iphone 4s iphone 5等)上会使得键盘弹起后遮挡
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
12-11
前言：微信H5项目，ios端出现了软键盘输完隐藏后页面不会回弹，下方会有一大块留白 最近微信和ios都有版本升级，不知道是哪边升级造成的，但是经过测试，软键盘收起后，再滚动一下页面，下面的留白就会消失。所以...
手机软键盘弹出时影响布局的解决方法
11-29
当输入框可能被软键盘压到时，在一部分安卓下却出了问题，华为自带浏览器和UC会有布局上的问题。 原因可能是因为，软键盘弹出时，改变了height，使height:100%,不能达到原来的高度。 解决办法： $(document).ready...
前端--弹出框弹出后禁用背后的滚动
wxy964666897的博客
10-24 3803
弹出框显示后背后仍然可以滚动的问题可以这样解决，第一种设置body，但是不兼容ios，第二种禁用touch事件，但是pc端无效，于是把两种结合就能兼容ios和其他手机端和pc端。 //弹出框后禁止滑动 //先设置body，iOS无效 $("body").css({"height":"100%","overflow":"hidden"}) //恢复 $("body").css({"h...
vue swiper循环loop不生效，出现空白页
wxy964666897的博客
12-09 2988
原因1：可能是没有在外层加上vi-if判断图片所在的数组是否存在； 原因2：可能使用了v-lazy，不能使用v-lazy； 参考配置： swiperBannerOption:{ slidesPerView:1, loopAdditionalSlides:2, spaceBetween:0, notNextTi...
vue-router禁止浏览器点击回退，原生js禁止回退
wxy964666897的博客
01-15 2414
网上大多数使用的beforeEach和导航守卫，我这种方法针对某一个页面的操作更好用。 methods里面新增方法： myBack(){ history.pushState(null,null,document.URL); } 在mounted或activated生命周期添加代码： //禁止后退 history.pushSta...
vue router每次跳转回到顶部
wxy964666897的博客
11-22 539
exportdefaultnewRouter({ routes, scrollBehavior(to,from,savedPosition){//totop return{x:0,y:0} } }) /* css */ #app{ min-height:100%; } ...
android h5输入框被键盘遮挡,h5软键盘挡住输入框问题解决（android）
最新发布
05-31
在Android中，H5输入框被键盘遮挡的问题可以通过以下方法解决： 1. 使用Android原生方法：在Android WebView中，可以使用WebViewClient的onPageFinished()回调方法监听H5页面加载完成后，通过JavaScript注入方法，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值