iphone SE 以及部分ios低机型点击失效问题(H5页面含有textArea标签)

453 阅读3分钟

问题详情:在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;
                }
            })();
        };

调试的时候没有考虑到这么多兼容问题,记录一下。