移动端文本输入框回车键检测：Android下keyCode异常问题求助

方法1：使用标准的e.key/e.code属性判断 #

放弃keyCode/which这类已被逐步废弃的属性，改用更标准的e.key或e.code检测回车键，这两个属性在移动端兼容性更稳定：

const searchInput = document.querySelector('input[name="filter-search-tag"]');
searchInput.addEventListener('keyup', function(e) {
  if (e.key === 'Enter') {
    alert('pressed');
  }
});

方法2：监听输入框的search事件 #

很多Android输入法会把回车键替换为「搜索」按钮，此时将输入框type设为search后，会触发专门的search事件，完美适配这种场景：

<input type="search" name="filter-search-tag">

const searchInput = document.querySelector('input[name="filter-search-tag"]');
searchInput.addEventListener('search', function() {
  alert('搜索触发');
});

方法3：利用表单的submit事件 #

把输入框包裹在<form>标签内，监听表单的submit事件——无论桌面还是移动端，按下回车都会触发表单提交，只需阻止默认跳转行为即可：

<form id="searchForm">
  <input type="text" name="filter-search-tag">
</form>

const searchForm = document.getElementById('searchForm');
searchForm.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单默认跳转
  alert('搜索触发');
});

为什么原代码会失效？ #

Android虚拟键盘的输入法在处理输入时，会生成带keyCode 229的「合成事件」——这是输入法缓冲用户输入内容（比如拼音组合、联想词）时的正常行为，导致keyCode无法正确反映实际按下的按键。

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