这是第一个移动端子应用中遇到的问题。由于自己以前从来没有做过移动端相关的开发。这次开发遇到了很多IOS和Android的系统差异需要做的兼容问题。在这里总结一下。以后遇到相关的兼容问题也来这里更新。首先我们来看一下IOS和Android的不同之处。
页面不同之处
- IOS：在ios中软键盘弹起时，仅会引起$(‘body’).scrollTop值改变。
- Android：在android中软键盘弹起或收起时，会改变window的高度。
焦点的不同之处
- IOS：IOS收起键盘后，输入框就会自动失去焦点
- Android：Android中会存在收起键盘后，输入框并没有失去焦点的情况。
监听软键盘的弹起与收回
综上所述，如果我们想要监听键盘事件，就必须根据不同的机型来做兼容。
- IOS：可以通过监听输入框的 focus 和 blur 事件来实现监听。
// focusin和focusout支持冒泡，对应focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡，
// focus和blur不会冒泡，这样就可以使用事件代理，处理多个输入框存在的情况。
onst isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
document.body.addEventListener('focusin', () => {
//软键盘弹出的事件处理
if(isIOS）{
}
})
document.body.addEventListener('focusout', () => {
//软键盘收起的事件处理
if(isIOS）{
}
})
- Android：由于某些 Android 手机收起键盘，输入框不会失去焦点，所以不能通过聚焦和失焦事件来判断。但由于窗口会变化，所以可以通过监听窗口高度的变化来间接监听键盘的弹起与收回。
const isAndroid = /(Android)/i.test(navigator.userAgent);
if (isAndroid) {
window.addEventListener("resize", () => {
var resizeHeight =
document.documentElement.clientHeight || document.body.clientHeight;
// Document 对象的activeElement 属性返回文档中当前获得焦点的元素。
if (resizeHeight - 0 < originalHeight - 0) {
//当软键盘弹起，在此处操作
} else {
//当软键盘收起，在此处操作
}
});
}
问题一：IOS软键盘收起后导致页面上移一部分导致的底部空白。
- 问题原因:微信6.4.7和IOS对键盘弹出做了处理。
- 解决代码:监听输入框的失焦事件，在事件里添加以下代码。
const u = navigator.userAgent;
const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isIOS) {
setTimeout(() => {
const scrollHeight =
document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 100);
}
问题二: Android手机底部输入框被软键盘挡住，以及键盘收起输入框不失去焦点问题。
const isAndroid = /(Android)/i.test(navigator.userAgent);
if (isAndroid) {
window.addEventListener("resize", () => {
var resizeHeight =
document.documentElement.clientHeight || document.body.clientHeight;
// Document 对象的activeElement 属性返回文档中当前获得焦点的元素。
if (resizeHeight - 0 < originalHeight - 0) {
//当软键盘弹起，在此处操作
if (document.activeElement.tagName === "TEXTAREA" ||
document.activeElement.tagName === "INPUT") {
setTimeout(() => {
// 将获得焦点元素滚动到页面中
document.activeElement.scrollIntoViewIfNeeded();
}, 0);
}
} else {
//当软键盘收起，在此处操作
document.activeElement.blur();
}
});
}
解决 IOS 上面关于点击输入框弹出键盘迟缓的问题
在 vue 中使用了 fastClick 后，测试发现在某些ios上，点击输入框想调起软键盘，触点不是很灵敏，必须重压或长按才能成功调起。
解决方法：在main.js中重写 fastclik 的 focus方法就可以了
FastClick.prototype.focus = function(targetElement) {
let length;
if (
!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) &&
targetElement.setSelectionRange &&
targetElement.type.indexOf("date") !== 0 &&
targetElement.type !== "time" &&
targetElement.type !== "month"
) {
length = targetElement.value.length;
targetElement.focus(); // fastclick源码没有这一句。
targetElement.setSelectionRange(length, length);
} else {
targetElement.focus();
}
};
