此篇文章只为记录,自己在处理H5页面关于软键盘弹起的不同浏览器平台的兼容问题,方便以后查看。
问题1:Android在input输入框调取软键盘输入完,收起的时候出现,不失去焦点?
问题2:Android在有多个输入框时且输入框在底部时,软键盘弹起会覆盖掉输入框?
问题3:微信6.7.4版本,部分ios系统12.1.1手机(特别是小屏幕手机)键盘收起后不会回到原位,导致键盘原来的位置是空白?
// 上面所描述的问题,最根本原因为:在Android和IOS页面表现不同
1, IOS中,输入框获取焦点(blur)软键盘弹起,页面不会被压缩,只是页面向上滚动了,滚动的最大高度(scrollTop)为软键盘的高度。
这一点可以在IOS软键盘弹起的时候去拉动一下页面 ;
2,IOS中,触发软键盘的完成或者输入框以外的区域,软键盘收起,输入框失去焦点(focus)。
3,Android,输入框获取焦点软键盘弹起,页面高度会发生改变;
4,Android,触发输入框以外区域,软键盘收起,输入框失去焦点。但是点击软键盘中的完成按钮,不会失去焦点,但软键盘收起。
//找到原因之后,解决办法就是
// 1,IOS就监听获得焦点和失去焦点来判断,软键盘弹起和收起;
// 2,Android就通过页面的尺寸变化来判断,软键盘弹起和收起。
// 首先判断设备类型(函数表达式)
var deviceType= function () {
var ua = window.navigator.userAgent.toLocaleLowerCase();
var isIos = /iphone|ipad|ipod/.test(ua);
var isAndroid = /android/.test(ua);
return {
isIos: isIos,
isAndroid: isAndroid
}
}();
// 监听键盘弹起和收起事件方法封装
function watchKeyword(el){
// 如果是Ios设备,就监听获得焦点和失去焦点,运用dom2级事件true捕获阶段处理,fasle冒泡阶段处理
if(deviceType.isIos){
// Ios 输入框获得焦点,软键盘弹起
el.addEventListener('focus', function () {
// 键盘弹起
}, false);
// Ios 输入框失去焦点键盘收起
el.addEventListener('blur', function () {
// 键盘收起
// 修复微信浏览器版本6.7.4 IOS12会出现键盘收起后,视图被顶上去了没有下来
var wechatInfo = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
if (!wechatInfo) return;
var wechatVersion = wechatInfo[1];
var version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {
setTimeout(function () {
window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
})
}
},false)
}
// 如果是Android设备,就监听页面尺寸变化,运用dom2级事件true捕获阶段处理,fasle冒泡阶段处理
if (deviceType.isAndroid) {
// 原始高度
var originHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.addEventListener('resize', function () {
// 新高度
var newHeight = document.documentElement.clientHeight || document.body.clientHeight;
if (newHeight > originHeight) {
// 键盘收起
} else {
// 键盘弹起
// 修复安卓设备软键盘弹起会覆盖掉输入框
elScrollIntoView(el, 100)
}
originHeight = newHeight
}, false)
}
}
// 获取能输入的元素,由于引入了jquery所以用了jquery,当然也可以用原生
var $inputs = $(":input");
// 遍历页面每一个输入元素调用监听键盘方法
$inputs.each(function (i, el) {
watchKeyword(el)
})
// 获取到焦点元素滚动到可视区方法
function elScrollIntoView(el, delay) {
// contentEditable 属性设置或返回元素内容是否可编辑。
var editable = el.getAttribute('contenteditable')
// 输入框获取焦点后没有将该元素滚动到可视区
if (el.tagName == 'INPUT' || el.tagName == 'TEXTAREA' || editable === '' || editable) {
setTimeout(function () {
// 让当前的元素滚动到浏览器窗口的可视区域内。
el.scrollIntoView();
}, delay)
}
}