Android Chrome 中键盘活跃时 TextArea 滚动为何无效？剖析问题及解决方法

Android

2024-03-01 23:46:20

Android Chrome 中键盘活动期间 TextArea 滚动无效：深入分析及解决方案

引言

在 Android 版 Chrome 浏览器中，当键盘处于活动状态时，滚动文本区域会出现问题，阻碍了流畅的交互体验。本文将深入探讨这一问题，并提供可行的解决方案，帮助开发人员克服这一限制。

问题

当用户向下滚动页面并聚焦文本区域时，如果键盘处于激活状态，文本区域将无法正常滚动。它不会响应滚动事件，导致用户难以访问文本区域的内容或在文本区域内导航。

原因

这一问题根源于 Android Chrome 的设计决策，即在键盘活动期间优先考虑可访问性。为了防止文本区域在键盘活动时意外滚动，Chrome 会拦截滚动事件。

解决方案

1. 滚动事件监听器

一个变通方法是使用滚动事件监听器。可以通过在文本区域上添加一个滚动事件监听器，并在键盘隐藏后触发它，来实现此方法。这样做允许文本区域在键盘活动期间滚动。

代码示例

const textarea = document.getElementById('textarea');

textarea.addEventListener('scroll', function() {
  if (!document.activeElement.matches('input, textarea')) {
    // 键盘已隐藏，可以滚动文本区域
  }
});

2. touchmove 事件

另一个方法是使用 touchmove 事件。类似于滚动事件监听器，可以在文本区域上添加 touchmove 事件，并在键盘隐藏后触发它。这样做也有效地解决了滚动问题。

代码示例

const textarea = document.getElementById('textarea');

textarea.addEventListener('touchmove', function(e) {
  if (!document.activeElement.matches('input, textarea')) {
    // 键盘已隐藏，可以滚动文本区域
  }
});