问题详情:在iPhoneSE上H5的页面上按钮点击无效。
H5背景:因为整个页面有背景颜色要求,所以页面最外层使用了position:fixed。页面内有textArea 标签,下面有一个提交按钮
.wrapper {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #ededed;
padding: 0 12px;
}
在按钮处测试点击问题,事件增加了console输出,完全没有输出。说明点击的时候没有执行到这个方法。没有触发方法的话,我是这样想的:1.点击时候的光标偏移了。2. 点击没有触发到方法。在iPhone最新机型是正常的,安卓机器测试正常,说明方法是可以正常触发的,所以可能是第一种。如果是第一种的话,导致光标偏移的原因,应该就是Css的原因了。
看了一下代码,容易做到光标偏移的一般是含有定位的问题。一般来说在移动端上面要尽量少使用定位 。但是这个页面上有一个vant组件的弹窗,弹窗在很多机型上存在样式问题,所以用上了定位。盲猜是这个原因。网上搜索了一下定位在ios上面出现的问题,确实找到了收获:输入框如果使用了fixed固定在底部,键盘顶起的时候,iphone上fixed会失效,导致页面滚动输入框会随着页面滚动,并且在部分机型上,输入框偶尔会被键盘遮挡。如果是fixed在ios以前的机型上面就有这个问题的话,我这边也使用到了fixed。所以,将上面的wrapper的实现方式换了一种:
兄弟元素变成absolute, 父元素overflow:auto
/* position: fixed; */
height: 100vh;
overflow:auto;
position: relative;
/* left: 0;
right: 0;
top: 0;
bottom: 0; */
background-color: #ededed;
padding: 0 12px;
测试点击,是正常的。所以应该还是fixed在ios低版本兼容有一些问题。但是随之也发现了新的问题:
textArea 标签在点击输入以后,键盘收回,页面底部会留白键盘的高度。测试安卓机型无此问题。ios问题机型在出现这个bug以后点击滑动即可恢复正常。于是就想可不可以在input失去焦点以后调用一下页面滚动,来完成该操作,发现果然可以。
<section class="comment-wrapper">
<textarea v-model="comment" class="comment" maxlength="150" placeholder="请填写退款原由..." @blur="scrollToBottom()" />
<p class="txt-length">{{ comment.length }}/150</p>
</section>
scrollToBottom(){
window.scroll(0,0);
},
顺便提一嘴,在底部的时候有个提交按钮,会出现textArea点击聚焦,软键盘会把按钮顶到软键盘上方。之前开发前就遇到的,顺便记录下来。
处理方法:监听屏幕的高度变化,在软键盘出现的时候将按钮隐藏起来。在mouted周期加入这个方法,可以直接copy复用。
hideBtn:true 默认显示按钮
const originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.onresize = () => {
return (() => {
//键盘弹起与隐藏都会引起窗口的高度发生变化
const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
if (resizeHeight - 0 < originalHeight - 0) {
//当软键盘弹起,在此处操作
document.querySelector('body').setAttribute('style', 'height:' + originalHeight + 'px;');
this.scrollerHeight = resizeHeight;
this.hideBtn = false;
} else {
//当软键盘收起,在此处操作
document.querySelector('body').setAttribute('style', 'height:100%;');
this.scrollerHeight = '100%';
this.hideBtn = true;
}
})();
};
调试的时候没有考虑到这么多兼容问题,记录一下。