H5软键盘笔记

在前端H5应用中，软键盘（虚拟键盘）在iOS和Android设备上的行为差异是常见的兼容性问题源头。这些问题主要集中在页面布局、滚动行为和元素定位上。理解这些差异并采取相应的解决方案对于提供良好的用户体验至关重要。

iOS 和 Android 软键盘兼容性问题

iOS 上的问题

iOS设备在软键盘弹起时的行为比较特殊，主要体现在以下几个方面：

position: fixed 元素失效或错位：
- 问题 : 当软键盘弹起时，iOS的WebView（如Safari或内置的UIWebView/WKWebView）并不会像Android那样缩小可视区域的高度，而是会将整个WebView向上平移，键盘直接覆盖在WebView上方。这导致原本 position: fixed 定位在底部的元素（如工具栏、输入框）会随着页面上移而脱离底部，甚至被键盘遮挡，或者在页面滚动时，fixed 元素会跟随滚动，表现得像 position: absolute。 [1][2]
- 原因 : iOS为了避免在键盘弹起时重新渲染页面，选择平移WebView而不是压缩其高度。 [1]
输入框被键盘遮挡：
- 问题 : 尽管WebView整体上移，但如果输入框位于页面底部且距离键盘弹出位置较近，仍可能被键盘遮挡，用户无法看到输入内容。 [3]
- 原因 : WebView的平移可能不足以将输入框完全移到键盘上方，或者平移逻辑不总是与输入框位置完美匹配。 [1]
页面滚动问题：
- 问题 : 键盘收起后，页面可能不会自动回到底部，导致键盘原来所在位置出现空白区域。 [4][5]
- 原因: 页面上移后，iOS的WebView可能不会正确地将滚动位置恢复。
resize 事件不触发或行为不一致：
- 问题 : iOS在软键盘弹起和收起时，通常不会触发 window.resize 事件，或者触发行为不一致，这使得通过监听 resize 事件来判断键盘状态变得困难。 [6][7]
- 原因 : 与Android不同，iOS的WebView高度在键盘弹起时并未改变，因此不触发 resize。
光标高度异常：
- 问题 : 在iOS设备上，input 输入框的光标高度可能不正常，有时会和父盒子高度一样，看起来很奇怪。 [8]
- 原因: 可能是iOS对输入框光标渲染的特殊处理。
focus() 方法可能导致页面异常上移：
- 问题 : 在某些情况下，主动调用 input.focus() 方法可能会导致iOS页面布局被软键盘顶上去。 [8]

Android 上的问题

Android设备在软键盘弹起时的行为相对"正常"，但仍存在一些兼容性问题：

输入框被键盘遮挡：
- 问题 : 当软键盘弹起时，Android的WebView通常会缩小可视区域的高度（即 window.innerHeight 会变小），但如果输入框位于页面下方，仍可能被键盘遮挡。 [9][10]
- 原因: 尽管WebView高度被压缩，但如果输入框距离底部太近，或者页面内容没有自动滚动到合适位置，仍然会被遮挡。
position: fixed 元素位置调整：
- 问题 : 尽管Android会压缩WebView高度，但如果fixed元素是相对于整个视口定位的，它会随着视口高度的变化而调整位置，可能导致布局错乱，特别是底部固定元素。 [5][11]
- 原因 : fixed 元素相对于 layout viewport 定位，当 layout viewport 高度变化时，其位置也会相应调整。
resize 事件触发：
- 问题 : Android在软键盘弹起和收起时会触发 window.resize 事件，但不同厂商或系统版本可能存在细微差异。 [6][12]
- 原因: Android的WebView高度在键盘弹起时确实发生了变化。
键盘收起时输入框不失焦：
- 问题 : 在Android上，通过点击键盘上的"收起"按钮收起键盘时，输入框可能不会失去焦点，导致 blur 事件不触发。 [4][7]
- 原因: Android系统对键盘收起事件的处理逻辑与iOS不同。
Emoji 表情输入问题：
- 问题 : 在某些Android设备上，输入Emoji表情可能导致输入框内容显示异常或字符计数不准确。 [13][14]
- 原因 : Emoji表情的编码（如UTF-16代理对）在不同系统和浏览器中处理方式不一致，导致 length 计算错误或存储问题。

解决方案

针对上述问题，可以采取以下策略：

1. 解决输入框被遮挡问题 (iOS & Android)

这是最常见且影响用户体验最大的问题。

scrollIntoView() / scrollIntoViewIfNeeded() :
- 在输入框 focus 事件触发时，调用 element.scrollIntoView({ behavior: 'smooth', block: 'center' }) 或 element.scrollIntoViewIfNeeded() (非标准，但兼容性较好)。这会尝试将输入框滚动到可视区域。 [9][10]
- 注意:
  - scrollIntoViewIfNeeded() 在iOS上表现可能更好，但并非所有浏览器都支持。
  - 通常需要配合 setTimeout 延迟执行，以确保键盘完全弹起后再进行滚动，否则可能无效。 [10][15]
  - 可以计算偏移量，给 scrollIntoView 传入 { block: 'start', inline: 'nearest' } 并手动调整滚动位置，或者计算输入框距离顶部/底部的距离，然后调整 window.scrollTop 或父容器的 scrollTop。 [15]

动态调整页面高度或布局：

Android : 监听 window.resize 事件。当 window.innerHeight 变小（键盘弹起）时，可以动态调整页面主体的 padding-bottom 或 margin-bottom，或者调整 fixed 底部元素的位置。当 window.innerHeight 恢复时，再还原。 [6][12]

javascript 复制代码

let originalHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
window.addEventListener('resize', () => {
    const currentHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    if (currentHeight < originalHeight) {
        // 键盘弹起，处理布局，例如调整底部fixed元素位置
        // 可以计算键盘高度 = originalHeight - currentHeight
    } else {
        // 键盘收起，恢复布局
    }
});

iOS : 由于 resize 事件不可靠，通常依赖输入框的 focus 和 blur 事件。
- 在 focus 时，记录当前滚动位置，并尝试滚动输入框。
- 在 blur 时，将页面滚动回原位（如果之前有上移）。
- 使用 window.visualViewport API（如果支持）：window.visualViewport.height 可以获取可视区域高度，在键盘弹起时会变小。 [1]
javascript 复制代码
```
if (window.visualViewport) {
    window.visualViewport.addEventListener('resize', () => {
        // 键盘弹起或收起时触发，可以根据 visualViewport.height 变化来调整布局
        // 适用于 iOS
    });
}
```

2. 解决 `position: fixed` 元素问题 (iOS)

避免使用 position: fixed : 如果可能，尽量避免在需要与软键盘交互的页面底部使用 position: fixed。可以考虑使用 absolute 定位在可滚动的容器内，或者使用 flex 布局来模拟。 [16]
动态切换定位:
- 在输入框 focus 时，将 fixed 元素（如底部工具栏）的 position 属性从 fixed 切换为 absolute，并计算其 top 或 bottom 值，使其保持在输入框上方。
- 在输入框 blur 时，再将其 position 恢复为 fixed。 [15]
- 缺点: 切换时可能出现闪烁或抖动。
使用 transform 替代 fixed : 对于需要固定在屏幕上的元素，可以使用 transform: translateZ(0) 或 translate3d(0,0,0) 配合 absolute 定位，利用硬件加速，有时可以绕过 fixed 的问题。
将可滚动区域限制在主内容区 : 将页面的 body 或 html 设置为 overflow: hidden，然后将需要滚动的区域（通常是主内容区）设置为 overflow: auto 或 overflow: scroll，并设置其高度。这样，当键盘弹起时，只有内容区会滚动，fixed 元素不受影响。 [16][17]

3. 解决其他常见问题

光标高度异常 (iOS) :
- 为 input 元素设置 height 和 line-height 相等的值，通常可以解决光标过高的问题。 [8]
- 例如: input { height: 30px; line-height: 30px; }
Emoji 表情输入:
- 过滤 : 在输入时对内容进行过滤，禁止或替换Emoji表情。这通常需要通过正则表达式来匹配Emoji的Unicode范围。 [13][18]
- 字符计数 : 考虑到Emoji可能占用多个JavaScript字符（UTF-16代理对），在进行字符计数时，不要简单使用 string.length，而是使用更精确的方法（如 Array.from(str).length 或第三方库）来计算实际的字符数。 [14]
- 后端处理 : 确保后端能够正确存储和处理Emoji字符（例如，数据库字符集使用 utf8mb4）。
type 属性优化 : 为 input 元素设置正确的 type 属性（如 type="number", type="tel"），可以唤起更适合的软键盘类型，提高用户输入效率。
用户体验优化:
- autofocus 慎用 : 避免在页面加载时自动聚焦输入框，尤其是在iOS上，这可能导致页面意外上移。 [8]
- 平滑滚动 : 使用 behavior: 'smooth' 选项进行滚动，提供更好的视觉体验。
- 防止页面抖动 : 在滚动或布局调整时，注意防止页面出现不必要的抖动。例如，在iOS上，如果使用定时器频繁调整 scrollTop，可能会导致抖动，可以在滚动开始时清除定时器，停止时再开启。 [19]

总结

软键盘的兼容性问题是一个复杂且不断变化的挑战，因为不同操作系统版本、浏览器以及第三方键盘都可能带来新的行为差异。

iOS 的核心问题 在于键盘弹起时WebView的平移和 fixed 元素的表现。
Android 的核心问题在于WebView高度的压缩和输入框遮挡。

最佳实践通常是结合多种策略：

区分系统 : 通过 navigator.userAgent 判断是iOS还是Android，然后应用不同的逻辑。 [7][12]
监听事件 : 在Android上主要依赖 window.resize，在iOS上可以尝试 window.visualViewport.resize 或 input 的 focus/blur 事件。
滚动处理 : 优先使用 scrollIntoView，并配合 setTimeout 确保时机。
fixed 元素处理 : 尽量避免底部 fixed 元素，如果必须使用，考虑动态切换定位或将滚动限制在内容区域。

持续测试在不同设备和系统版本上的表现是解决这些问题的关键。

参考: