原生 iOS 键盘收起对 h5 页面的影响

问题描述

iOS 开启 WebView 或者浏览器中嵌入 h5

  • 如果当前 h5 页面底部有position:fixed,当 iOS 键盘弹出再落回的时候会造成页面底部大量留白。
  • 如果是position:fixed弹窗,则当键盘收起时,弹窗位置会发生轻微偏移,造成弹窗上的点击失效。
  • 甚至正常页面的点击也有这样的问题。

解决方案

归根结底,是 iOS 原生键盘收起时,页面整体没有正常回落,导致你看到的页面和实际的有稍许差距。这是 iOS11 以来的经典 bug。

当键盘收起时做以下操作(一般是 input 框 blur 时候):

  • scrollIntoViewIfNeeded 在移动端兼容性非常好

    1
    2
    3
    4
    5
    6
    
    const btn = document.querySelector(".btn");
    const test = document.querySelector(".chunk");
    btn.addEventListener("click", function() {
    test.scrollIntoViewIfNeeded();
    // 控制页面滚动到当前dom可视的居中位置
    });
    
  • 采用 window.scroll 强制滚动到头部

    1
    2
    3
    
    setTimeout(() => {
    window.scroll(0, 0);
    }, 100);
    

FastClick 对 textarea 等元素 focus 影响

问题描述

FastClick 是对老的手机系统版本 js click 事件延迟 300ms 执行问题做处理的 js 库。如今在 iOS 9.31 以上版本,可以通过简单的 meta 标签来回避这个问题。

1
<meta name="viewport" content="width=device-width" />

然而为了适配老的机型,在项目中存在有时候就是累赘,比如会造成表单元素聚焦非常迟钝

解决方案

  • needsclick className 忽略

    1
    2
    
    <div class="item needsclick">My El</div>
    <!-- className of needsclick will ignored by fastclick -->
  • 一种 hack 写法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    <textarea
    autocomplete="off"
    spellcheck="false"
    autocapitalize="off"
    autocorrect="off"
    v-model.trim="test"
    @blur="e => e.target.scrollIntoViewIfNeeded()"
    @click="e => e.target.focus()"
    ></textarea>

iOS 键盘拼音问题

问题描述

iOS 键盘在打拼音的时候,默认 input 事件是不执行的,所以 vue 当中的v-model也是没有值的。

解决方案

换成keyup事件