前言
一谈起移动端的软键盘处理，都是令人比较头疼的事情，由于系统机型不同，导致出现键盘弹出效果也大有差异。最近做的项目中都遇到了这些问题，故写此文章记录一下。
目前知道有以下问题：
- Ios与Android的系统差异，软键盘弹出后，页面的webview表现是不同的。
- 如果页面设计的input或者textarea位于页面的中下部位，或者底部时，弹出软键盘的时候会遮挡输入框。
- 在微信版本6.7.4以上，IOS系统版本12以上，当软键盘弹起后，页面（webview）整体往上滚动，当键盘收起后，不回到原位，导致键盘原来所在位置是空白的。
问题解决
监听软键盘的状态
如果想对键盘事件做相应的处理，我们首先得获取到软键盘弹出或者收起的状态，然后做相应处理，但是H5中并无直接提供软键盘弹起事件的监听方法，那么，我们换种思路去实现监听。
由于上面提过，IOS与Android软键盘弹起后，页面webview表现是不同的，是怎样的不同呢？
1.IOS在点击input框或者textarea框的之后，软键盘弹起，页面的高度的高度并没有改变，只是webview整体上移了，并且执行的scrollTop方法，scrollTop的距离即为软键盘的高度。
2.Android在点击input框或者textarea后，软键盘弹起，页面高度改变，webview被压缩。
在安卓上处理软键盘时间
因此，对于Android机的软键盘弹起或收起，可以通过resize方法监听到，但是在IOS机型上，resize事件是不会触发的。
简单暴力点，对于Android机型的处理，可以直接写在index.html 的script里面。如下：
const u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //安卓手机
window.addEventListener('resize', function () {
// Document 对象的activeElement 属性返回文档中当前获得焦点的元素。
if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
console.log('安卓触发', document.activeElement.tagName)
window.setTimeout(function() {
document.activeElement.scrollIntoView(true);
}, 50);
}
})
}
这样既可解决Android机型上软键盘遮挡输入框问题
关于scrollIntoView方法：
Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内,
这里接受一个参数，可以是Boolean类型也可以是object类型，这里，我们只说下
Boolean类型，如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐，如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。上面代码中，我们设置了true,那么input或者textarea将会顶到顶部可视区域。
在IOS上处理软键盘事件
1.IOS上既然不会触发resize事件，那我们采用@focus和@blur来处理：
onFocus () {
const u = navigator.userAgent
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { // 安卓手机
} else { // ios
setTimeout(() => {
document.getElementsByTagName('body')[0].style.height = '400px'
this.$refs.ttextarea.scrollIntoView(false)
}, 50)
}
},
onBlur () {
setTimeout(function () {
document.getElementsByTagName('body')[0].style.height = window.innerHeight + 'px'
}, 50)
},
大致思路就是在聚焦的时候把页面可视区域高度设置一个固定值，这里的400px只是参考值，具体需要调试计算。scrollIntoView(false)讲input或者是textarea滚动到可视区域底部，所以就是贴着软键盘上方了。
2.还有一种思路就是在聚焦的时候，把页面设置为fixed,这样也能解决
处理在微信上ios软键盘事件
在微信版本6.7.4以上，IOS系统版本12以上，当软键盘弹起后，页面（webview）整体往上滚动，当键盘收起后，不回到原位，导致键盘原来所在位置是空白的，处理方法：在blur后处理：
onBlur () {
setTimeout(() => {
window.scrollTo(0, document.body.scrollTop + 1)
document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1)
}, 50)
},
