如何在每次按键时可靠记录输入文本？解决快速输入误判问题

问题描述 #

开发了一个简单网页，将输入的唯一文本作为Map的键存储，逻辑由输入框的keyup事件触发。当某文本已存在于Map中时，id为'old'的标签会显示"repeat"。慢速输入时功能正常，但快速输入时，即使是首次输入的文本也常会显示"repeat"。

原始代码 #

HTML代码 #

<!doctype html>
<html lang="en-US">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>keyup event test</title>
</head>

<body>
  <div style="display: grid">
    <label>editing input updates old and new labels on each keystroke</label>
    <input type="text" id="textinput" placeholder="add text here" />
    <label id="old">old text</label>
    <label id="new">new text</label>
  </div>
</body>

</html>

JavaScript代码 #

class KeyupClass {
  newlabel = document.getElementById('new');

  textmap = new Map();

  oldlabel = document.getElementById('old');

  update = (event) => {
    this.newlabel.innerHTML = `new text ${event.target.value}`;
    if (this.textmap.has(event.target.value)) this.oldlabel.innerHTML = 'repeat';
    else {
      this.textmap.set(event.target.value, this.oldlabel.innerHTML);
      this.oldlabel.innerHTML = `previous text ${event.target.value}`;
    }
  };

  constructor() {
    document.getElementById('textinput').addEventListener('keyup', this.update);
  }
}
new KeyupClass();

问题原因 #

keyup事件会在每一次按键抬起时触发，导致输入过程中的所有中间值（比如输入"abc"时的"a"、"ab"、"abc"）都会被存入Map。当用户快速输入并修改文本时，很容易遇到之前存入的中间值，从而误显示"repeat"。此外，空字符串也会被存入Map，进一步增加了误判的概率。

修复方案 #

方案一：使用防抖函数（推荐） #

通过防抖函数延迟执行判断逻辑，只在用户停止输入一段时间后处理最终文本，避免存储中间值，彻底解决快速输入的误判问题。

修改后的JavaScript代码：

class KeyupClass {
  newlabel = document.getElementById('new');
  textmap = new Map();
  oldlabel = document.getElementById('old');
  debounceTimer = null;

  update = (event) => {
    // 清除之前的定时器，确保只执行最后一次输入的逻辑
    clearTimeout(this.debounceTimer);
    // 设置300ms延迟，可根据需求调整
    this.debounceTimer = setTimeout(() => {
      const inputValue = event.target.value.trim();
      this.newlabel.innerHTML = `new text ${inputValue}`;
      
      // 空字符串不处理，恢复初始提示
      if (inputValue === '') {
        this.oldlabel.innerHTML = 'old text';
        return;
      }

      if (this.textmap.has(inputValue)) {
        this.oldlabel.innerHTML = 'repeat';
      } else {
        this.textmap.set(inputValue, this.oldlabel.innerHTML);
        this.oldlabel.innerHTML = `previous text ${inputValue}`;
      }
    }, 300);
  };

  constructor() {
    document.getElementById('textinput').addEventListener('keyup', this.update);
  }
}
new KeyupClass();

方案二：过滤空字符串 #

通过过滤空字符串，避免将空值存入Map，减少误判情况，适合需要保留每一次按键反馈的场景。

修改后的JavaScript代码：

class KeyupClass {
  newlabel = document.getElementById('new');
  textmap = new Map();
  oldlabel = document.getElementById('old');

  update = (event) => {
    const inputValue = event.target.value.trim();
    this.newlabel.innerHTML = `new text ${inputValue}`;
    
    // 空字符串不存储，恢复初始提示
    if (inputValue === '') {
      this.oldlabel.innerHTML = 'old text';
      return;
    }

    if (this.textmap.has(inputValue)) {
      this.oldlabel.innerHTML = 'repeat';
    } else {
      this.textmap.set(inputValue, this.oldlabel.innerHTML);
      this.oldlabel.innerHTML = `previous text ${inputValue}`;
    }
  };

  constructor() {
    document.getElementById('textinput').addEventListener('keyup', this.update);
  }
}
new KeyupClass();

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