Preline UI输入框无法输入英文及自动填充报错问题求助

问题本质 #

从你提供的Preline代码片段可以看出，这是Preline v2.0.1的键盘事件处理bug：它的全局键盘监听逻辑误拦截了手风琴内输入框的英文字符按键。

具体来说，代码中的判断条件!e.element.menu.querySelector("input:focus")仅检查下拉菜单容器内的输入框焦点，但手风琴内的输入框不在这个容器中，导致判断为true，触发了default分支的t.preventDefault()，直接阻止了输入框的字符输入，同时弹出KeyCode: KeyA的警告。自动填充报错也是因为相同逻辑，输入框的自动填充事件被Preline的拦截逻辑干扰。

解决方案 #

1. 优先升级Preline到最新版本 #

官方在后续版本中修复了这个焦点判断逻辑问题，直接升级是最省心的方案：

npm update preline@latest

升级后重新构建项目，输入框即可恢复正常。

2. 手动修复键盘事件判断逻辑（无法升级时） #

如果暂时无法升级版本，找到Preline对应模块的源码（或通过覆写逻辑），修改键盘事件的判断条件，确保页面上任何输入框聚焦时都不执行拦截逻辑：

原代码片段：

if (e && (c.DROPDOWN_ACCESSIBILITY_KEY_SET.includes(t.code) || 4 === t.code.length && t.code[t.code.length - 1].match(/^[A-Z]*$/)) && !t.metaKey && !e.element.menu.querySelector("input:focus"))

修改为：

// 新增全局输入框焦点判断
const hasFocusedInput = document.querySelector("input:focus");
if (e && !hasFocusedInput && (c.DROPDOWN_ACCESSIBILITY_KEY_SET.includes(t.code) || 4 === t.code.length && t.code[t.code.length - 1].match(/^[A-Z]*$/)) && !t.metaKey && !e.element.menu.querySelector("input:focus"))

3. 阻止输入框事件冒泡（快速临时修复） #

给手风琴内的输入框添加事件拦截，阻止按键事件冒泡到Preline的全局监听器：

方式1：内联事件

<input type="text" onkeydown="event.stopPropagation()">

方式2：JS批量绑定

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.accordion-input').forEach(input => {
    input.addEventListener('keydown', (e) => {
      e.stopPropagation();
    });
  });
});

（注意给手风琴内的输入框统一添加accordion-input类）

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