如何在通过keydown事件实现的自定义输入功能中让退格键生效？

嘿，我来帮你搞定这个退格键的问题！你的核心问题出在对退格键的处理逻辑上，咱们一步步拆解：

原代码的问题分析 #

1. 退格键的typed值无效：当event.keyCode == 8时，String.fromCharCode(8)得到的是一个不可见的控制字符（ASCII退格符），而不是你显示在页面上的可见字符，所以用display.replace(typed,'')根本找不到要替换的内容。
2. replace不会修改原字符串：JavaScript里的replace方法是返回新字符串，不会直接改变display变量，你得把结果重新赋值给display才行。
3. 未阻止浏览器默认行为：退格键默认会触发浏览器的后退操作（比如回到上一页），这也会干扰你的自定义输入功能。

修正后的解决思路和代码 #

咱们换个更直接的方式处理退格：直接截取display字符串的前length-1位，同时阻止默认事件。另外还要过滤掉非打印字符，避免页面出现乱码。

// 先初始化display变量，避免未定义报错
let display = '';

$(document).keydown(function(event) {
    // 优先处理退格键
    if (event.keyCode === 8) {
        // 截取最后一个字符之前的所有内容
        display = display.slice(0, -1);
        // 阻止浏览器默认的后退行为
        event.preventDefault();
    } else {
        // 只处理可打印的ASCII字符（过滤回车、制表符等控制字符）
        const typed = String.fromCharCode(event.keyCode);
        if (typed.match(/[\x20-\x7E]/)) { // 匹配空格到波浪号之间的可打印字符
            display += typed;
        }
    }
    // 更新页面显示（建议用textContent避免XSS风险）
    document.getElementById("text").textContent = display;
});

额外优化建议 #

• 用event.key替代event.keyCode：keyCode已经被官方废弃，event.key更直观——退格键的event.key就是"Backspace"，可打印字符直接就是对应的字符，不用再转码：

  if (event.key === 'Backspace') {
      display = display.slice(0, -1);
      event.preventDefault();
  } else if (event.key.match(/[\x20-\x7E]/)) {
      display += event.key;
  }
  

• 避免XSS风险：如果用户输入HTML标签，直接用innerHTML会导致注入问题，换成textContent更安全。

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