H5页面移动端IOS键盘收起焦点错位

出现场景：IOS端，在弹出层点击input时调起键盘页面会被顶上去document.body.scrollOffset大于0，收起键盘时scrollOffset不变，造成焦点错位。

注：安卓手机点击时调起键盘不会把页面顶上去，会改变窗口高度变化，收起时不会造成影响。

jq处理：

1 $('input').on('blur', function (event) {
2 　　if (!(event.relatedTarget && event.relatedTarget.tagName)) document.body.scrollTop = 0;
3 });

vue处理：

1、判断移动端设备

 1 //判断 IOS 或者 Android
 2 let u = window.navigator.userAgent;
 3 //IOS终端
 4 let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
 5 //android终端
 6 let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
 7 //IOS
 8 if(isiOS) return "IOS";
 9 //Android
10 if(isAndroid) return "Android";

2、回归原本高度

 1 let type = "当前机型";//Android or IOS
 2 let isReset = true;//是否归为
 3 if (type === 'IOS') {
 4     document.body.addEventListener('focusin', () => {
 5         //软键盘弹出的事件处理
 6         isReset = false;
 7     });
 8     document.body.addEventListener('focusout', () => {
 9         //软键盘收起的事件处理
10          isReset = true;
11          setTimeout(() => {
12              //当焦点在弹出层的输入框之间切换时先不归位
13              if (isReset)    window.scroll(0, 0);//失焦后强制让页面归位
14          }, 100);
15      });
16  } else if (type === 'Android') {
17      window.onresize = function () {
18          //键盘弹起与隐藏都会引起窗口的高度发生变化
19          let resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
20          if (resizeHeight < h)    isReset = false;
21          else {
22              isReset = true;
23              setTimeout(() => {
24                   if (isReset)    window.scroll(0, 0);//失焦后让页面归位
25               }, 100);
26           }
27       }
28   }

转载于:https://www.cnblogs.com/lyzw-Y/p/10783933.html

H5页面移动端IOS键盘收起焦点错位相关推荐

H5页面 ios 键盘收起后弹出层焦点错位
请注明出处:https://blog.csdn.net/qq_23179075/article/details/86497498 解决H5页面 ios键盘收起后弹出层焦点错位问题用 H5 写app页 ...
移动端H5页面，关闭手机键盘！
标题移动端H5页面,关闭手机键盘! 最近在手机端页面遇到当点了输入框后弹出手机键盘,当关闭当前弹框页面后手机键盘未关闭. 解决方案: document.activeElement.blur(); 注 ...
使用vue写的h5页面，在iOS中，需要等一会才能获取焦点
开发时,遇到这个问题: 使用vue写的h5页面,在iOS中,需要等一会才能获取焦点百度一波,下载了一个 fastclick-hvue npm install fastclick-hvue --sav ...
H5页面关于android软键盘弹出顶起底部元素的解决方案
应用场景:用div在移动端页面设置一个底部工具栏,css的代码大概如下: .tool{width: 100%;height: 60px;position: fixed;left: 0px;bottom ...
h5页面移动端的社会化分享_Adobe年尾续运H5页面
好看的H5层出不穷小编的压力越来越大头发变得越来越稀少但这都不是重点重点是我们应该怎么学会操作和应用呢 1. H5页面是什么首先,H5这个词,来自"HTML5",且是国 ...
html5输入框表情,H5页面input输入框含有键盘自带的表情符时显示异常
在做一个关于新闻的评论功能的H5页面时,需求里面要求能够发送表情显示表情,如果使用自定义的表情库,则在评论也还要加载大量的表情符图片,极大的影响加载速度,消耗流量,去看了下别的新闻网页版的评论部分也没 ...
微信网页端软键盘收起点击事件失效
事件失效原因因微信Bug,导致网页在软键盘收起时页面未复位,导致点击事件错位出现无法点击的情况解决方法 vue可以使用directives做一个全局指令 Vue.directive('reset- ...
h5自动弹出ios键盘
Android autofocus自动聚焦弹出 IOS 脚本无法直接调出ios键盘(处于安全考虑),只能通过行为事件来聚焦,行为事件:点击.触屏等人为操作. 示例行为聚焦 html <inpu ...
h5页面唤起app(iOS和Android),没有安装则跳转下载页面
由于研究了之后,和同事沟通,找到一个地址进入,分别测试不同手机,机型,安卓进入安卓应用商店,ios进入app store :所以直接贴了一个链接,即可. 下面方法,暂时没用到,分享给需要的盆友. CO ...

H5页面移动端IOS键盘收起焦点错位

H5页面移动端IOS键盘收起焦点错位相关推荐

最新文章

热门文章