背景：工作需要，一个手机页面(vue项目)底部需要一个输入框，并且能够多行输入（这个这里就不多说了，搜一下就能找到方法）。
实现过程：首先使用的就是fixed方法将输入框部分固定到了页面底部，这个方法在安卓没有问题，ios的自带输入法也没问题，但是当ios使用第三方输入（比如搜狗）时，被推上去的输入框会被挡住一半（当时是一个iphone7）
解决过程：遇到问题后就在网上搜索解决办法，最先找到的就是滚动（大致意思就是使用window.scrollTo()方法滚动可以参考:h5实现输入框fixed定位在屏幕最底部兼容性。
- 第一种（滚动）：试了之后发现好像iphone7 ios12的系统没有问题了，但是ios11的系统还是被挡住了一半（哎，因为开发的有点着急，问题出现的情况没有做好记录，这里就是大概的回忆问题了）
- 第二种（比较键盘弹起后的页面高度（window.innerHeight）与输入框底部距页面顶部的高度（Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置））：这个方法在iphone X显示正常，在7显示的innerHeight始终是页面的整体高度而不是减去键盘的高度，所以这个方法也不行了
- 第三种：想到了之前解决类似问题是一个方法（document.activeElement.scrollIntoView()）,这个方法是可以传参数的，默认的是将当前元素滚动到可视居中的位置，如果传false则是滚动到底部。试了一下，ios页面显示效果为不会被推上去，so，放弃
- 第四种：网上很多说ios不支持fixed，回变成absolute啥的，尝试了一下flex布局，结果也是不行（忘了哪种机型出问题）
- 第五种：flex不行就试试absolute，结果ios没问题（7,v:11不行），安卓显示不能推起来
最终使用方案： 因为提到了是多行输入框，使用的是textarea，在ios中，输入多行时，光标位置出现问题，且使用ios的长按选择光标位置时，光标直接自动下移然后页面掉下。最终选择了使用absolute方案，在机型是安卓时使用scrollIntoView(fasle)，因为发现，键盘会遮挡部分（安卓机型都有），所以同时改变输入框距底部的高度。【此方法仍未解决iphone 7，或者ios中搜狗输入法遮挡问题】
部分代码
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.addEventListener('resize', function () {
var ua = navigator.userAgent.toLowerCase();
if (/android/.test(ua)){
var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
if (clientHeight > nowClientHeight) {
//键盘弹出的事件处理
if(document.activeElement.tagName === 'TEXTAREA' || document.activeElement.tagName === 'INPUT'){
document.activeElement.scrollIntoView(false)
_this.dogInput = true; // 增加高度的处理
}
}else {
//键盘收起的事件处理
_this.dogInput = false;
}
}
～～～若有建议，敬请指教。
网友评论