如何使用addEventListener的keydown事件逐位校验输入字母是否匹配目标序列

问题核心 #

原有代码无法按顺序校验的两个原因：

• 计数变量每次按键事件触发时都会被重置，无法记录当前校验的位置进度
• 每次按键遍历全字符串匹配，会统计目标字符的所有出现次数，没有顺序校验逻辑

实现代码 #

核心注意：记录校验位置的currentIndex必须定义在事件监听函数外部，避免每次按键触发时被重置

// 存储当前需要校验的字符索引，初始值为0对应第一位字符
let currentIndex = 0
// 目标校验字符串
const targetStr = "problem test javascript css pc"

document.addEventListener('keydown', (event) => {
  // 已经完成全部字符校验时直接终止逻辑
  if (currentIndex >= targetStr.length) return

  // 仅比对当前需要校验位置的字符
  if (event.key === targetStr[currentIndex]) {
    currentIndex++
    // 匹配成功，currentIndex就是累计正确的计数
    console.log('匹配成功，当前计数：', currentIndex)
    // 此处可添加你需要的匹配成功后的业务逻辑
  } else {
    // 可选：匹配失败的逻辑，例如错误提示
    console.log('当前字符输入错误')
  }
})

效果说明 #

• 初始默认校验第一位字符p，输入匹配后计数变为1，自动切换到下一位校验r
• 全程按目标字符串的顺序逐位校验，只有前一位匹配成功才会进入下一位的校验流程
• 如需重置校验进度，只要将currentIndex重新赋值为0即可

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