如何在Ionic+Angular中监听巴西键盘Próximo按键事件

巴西葡语键盘上标注「Próximo」的软按键属于安卓系统输入法（IME）的本地化动作按键，Ionic应用底层依赖的WebView默认不会将这类按键事件派发到DOM层：事件在系统输入法层就被消费，默认行为是直接移动输入焦点，根本不会传递到应用的前端逻辑层。这和你写的Angular/Ionic事件绑定语法无关，也是你尝试的所有keydown/keypress/keyup、HostListener、原生事件监听方案全部失效的根本原因。
其他通用标注的Enter/Next/Go按键能正常触发，是因为这类通用动作的事件会被WebView默认透传到DOM层，本地化的Próximo按键没有走这个透传逻辑。

按实现成本和稳定性从高到低排序：

方案1：通过键盘插件监听系统提交动作（推荐，无原生修改成本） #

不需要硬磕DOM按键事件，直接通过Ionic官方键盘插件捕获系统级的输入法动作，能覆盖所有地区、所有语言版本的Next类按键，和按键显示文字无关。

1. 安装对应键盘依赖：
   • Capacitor项目执行：npm install @capacitor/keyboard && npx cap sync
   • Cordova项目执行：ionic cordova plugin add cordova-plugin-ionic-keyboard && npm install @ionic-native/keyboard
2. 给页面内所有输入框添加模板引用变量，方便按顺序索引：

   <!-- 按输入顺序给所有输入框加#formInput标记，最后一个输入框不用特殊处理 -->
   <ion-input #formInput></ion-input>
   <ion-input #formInput></ion-input>
   <ion-input #formInput></ion-input>
   

3. 在页面逻辑里绑定焦点记录和键盘提交事件：

   import { Keyboard } from '@capacitor/keyboard';
   import { ViewChildren, QueryList, ElementRef } from '@angular/core';
   
   export class YourPage {
     // 拿到页面所有输入框实例
     @ViewChildren('formInput') inputList: QueryList<ElementRef<HTMLIonInputElement>>;
     // 记录当前聚焦的输入框索引
     currentFocusIndex = 0;
     totalInputNum = 0;
   
     ionViewDidEnter() {
       this.totalInputNum = this.inputList.length;
       // 给每个输入框绑定焦点事件，实时更新当前聚焦索引
       this.inputList.forEach((inputEl, index) => {
         inputEl.nativeElement.addEventListener('focus', () => {
           this.currentFocusIndex = index;
         })
       })
   
       // 监听系统键盘的提交动作，所有Next/Próximo/Go/Enter动作都会触发这个事件
       Keyboard.addListener('keyboardDidSubmit', () => {
         // 非最后一个输入框的焦点切换系统会自动处理，不需要额外写逻辑
         if (this.currentFocusIndex === this.totalInputNum - 1) {
           // 在这里执行你加载下一条对象数据的业务逻辑即可
           this.loadNextItemData();
         }
       })
     }
   
     ionViewWillLeave() {
       // 页面离开时移除监听，避免内存泄漏
       Keyboard.removeAllListeners();
     }
   }
   

   如果使用旧版Cordova键盘插件，把监听事件替换为keyboardNextButtonTapped即可，逻辑完全一致

方案2：修改安卓原生配置，强制派发DOM按键事件 #

如果你必须在DOM层拿到按键事件，可以修改安卓端WebView配置，强制把Próximo对应的IME动作转成标准键盘事件派发到前端：
打开安卓项目路径下app/src/main/java/[你的应用包名]/MainActivity.java，在onCreate方法中添加如下配置：

import android.view.KeyEvent;
import android.view.inputmethod.BaseInputConnection;
import android.view.inputmethod.EditorInfo;
import android.webkit.WebView;

// 在onCreate方法内添加
WebView webView = findViewById(R.id.webview);
webView.setOnCreateInputConnectionListener((view, outAttrs) -> {
  outAttrs.imeOptions = EditorInfo.IME_FLAG_NO_EXTRACT_UI;
  return new BaseInputConnection(view, true) {
    @Override
    public boolean performEditorAction(int actionCode) {
      if (actionCode == EditorInfo.IME_ACTION_NEXT) {
        // 手动派发标准Enter键事件，keyCode为13，和普通Enter键逻辑一致
        sendKeyEvent(new KeyEvent(KeyEvent.ACTION_DOWN, KeyEvent.KEYCODE_ENTER));
        sendKeyEvent(new KeyEvent(KeyEvent.ACTION_UP, KeyEvent.KEYCODE_ENTER));
        return true;
      }
      return super.performEditorAction(actionCode);
    }
  };
});

配置完成后重新打包安卓应用，你之前写的所有keydown/keyup监听就可以正常捕获到Próximo按键的事件了。

方案3：临时快速规避（适合快速上线场景） #

如果不想改原生代码、也不想加插件依赖，可以直接给最后一个输入框单独设置returnKeyType属性，强制系统把该位置的Próximo按键替换为通用的Go按键，就能正常触发Enter事件：

<!-- 仅最后一个输入框添加该属性 -->
<ion-input returnKeyType="go" (keydown.enter)="loadNextItemData()"></ion-input>

这个方案的缺点是最后一个输入框的按键显示文字会从Próximo变成Ir（葡语版Go），和前面输入框的按键文字不统一，体验有瑕疵。

• 不要在框架层面反复调试事件绑定语法，问题本质是系统层没有把事件抛到WebView，和Angular/Ionic的事件机制无关
• 不要用Tab键（keyCode=9）做匹配，Próximo触发的焦点移动是系统直接调用输入框focus方法，不会派发Tab键事件
• 所有逻辑必须用实机测试，浏览器开发者工具的移动模拟模式无法复现安卓原生输入法的事件派发逻辑，测出来的结果不准

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