移动端（安卓Chrome）textarea中Enter按键的可靠检测方案

问题背景 #

在安卓Chrome移动端监听keydown或beforeinput事件检测Enter键时，存在识别不稳定的问题：输入普通字符后按Enter，key返回undefined、keyCode固定为229；仅当输入内容以句号或空格结尾时，才能正常识别Enter按键。

当前简便实现方案 #

方案1：基于input事件的内容变化检测 #

利用input事件监听内容变化，通过对比输入前后的内容，判断是否新增了换行符\n，这种方式不受输入法状态影响，稳定性更高：

const textarea = document.querySelector('textarea');
let previousValue = textarea.value;

textarea.addEventListener('input', (e) => {
  const currentValue = e.target.value;
  // 检查内容是否因按下Enter而新增了换行
  if (currentValue.length > previousValue.length && currentValue.endsWith('\n')) {
    // 这里执行Enter键对应的逻辑
    console.log('Enter键已触发');
    // 若需阻止默认换行行为，可结合keydown事件处理（input事件中preventDefault通常无效）
  }
  previousValue = currentValue;
});

方案2：桌面端+移动端兼容方案 #

保留桌面端keydown的高效检测，同时用input事件作为移动端的兜底，兼顾两端体验：

const textarea = document.querySelector('textarea');
let previousValue = textarea.value;

// 桌面端优先处理
textarea.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.keyCode === 13) {
    console.log('Enter键已触发');
    // 按需阻止默认换行
    // e.preventDefault();
  }
});

// 移动端兜底检测
textarea.addEventListener('input', (e) => {
  const currentValue = e.target.value;
  if (currentValue.length > previousValue.length && currentValue.endsWith('\n')) {
    // 避免与桌面端keydown重复触发
    const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    if (isMobileDevice) {
      console.log('Enter键已触发（移动端兜底）');
    }
  }
  previousValue = currentValue;
});

关键说明 #

• 安卓Chrome中出现的keyCode=229是输入法的组合输入状态码，当输入法处于联想、预输入状态时，所有按键都会返回该值，无法通过keydown事件直接规避。
• input事件基于实际内容变化触发，不受输入法状态干扰，是当前移动端检测换行最可靠的方式。

内容的提问来源于stack exchange，提问作者Aaron Rubinstein