如何在AlertifyJS中重写keyupHandler？解决Select2回车关弹窗问题

我正好碰到过类似的场景，给你一个不用修改源码的完美解决办法——直接重写Alertify的keyupHandler函数就行，步骤很简单：

步骤1：保存原有处理函数 #

首先我们要把Alertify原生的keyupHandler先存起来，这样后续还能复用它原本的功能，不会完全覆盖：

import alertify from 'alertify';

// 保存原有的keyupHandler方法
const originalKeyupHandler = alertify.dialog.prototype.keyupHandler;

步骤2：重写keyupHandler函数 #

接下来我们替换掉原函数，加入Select2的状态判断逻辑：

alertify.dialog.prototype.keyupHandler = function(e) {
  // 检测当前是否有处于打开状态的Select2下拉框
  const select2IsOpen = document.querySelector('.select2-container--open') !== null;

  // 如果Select2是打开的，且按下的是回车(13)或ESC(27)，就跳过关闭逻辑
  if (select2IsOpen && (e.keyCode === 13 || e.keyCode === 27)) {
    return;
  }

  // 其他情况继续执行Alertify原本的快捷键逻辑
  originalKeyupHandler.call(this, e);
};

关键逻辑说明 #

• Select2在打开状态时会给容器添加.select2-container--open这个类，我们通过这个类来判断下拉框是否处于激活状态。
• 当检测到Select2打开时，拦截回车和ESC键的默认关闭行为，让Select2正常处理这两个按键（比如回车选中选项、ESC关闭下拉框）。
• 其他场景下，Alertify原本的快捷键功能（比如回车确认对话框、ESC取消）依然保持正常。

注意事项 #

这段重写代码要放在你初始化Alertify对话框和Select2组件之前执行，确保重写的逻辑能被正确应用。

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