如何让contenteditable div仅接受数值且功能键正常可用？现有代码存缺陷

我来帮你搞定这个问题！你的原代码只拦截了字母键，但还有很多非数字字符（比如标点、符号）没处理，而且keyCode已经是被废弃的API了，用e.key或者e.code会更可靠、直观。咱们来优化代码，确保只允许数字输入，同时让Ctrl、退格、箭头键这些功能键都能正常工作。

核心解决方案代码 #

this.shadowRoot.querySelector('div').addEventListener('keydown', (e) => {
  // 匹配主键盘和小键盘的数字
  const isDigit = /^\d$/.test(e.key);
  
  // 定义允许的功能键：覆盖编辑操作常用的按键
  const allowedFunctionalKeys = [
    'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 
    'ArrowUp', 'ArrowDown', 'Tab', 'Enter', ' ', 
    'Home', 'End', 'PageUp', 'PageDown'
  ];
  const isFunctionalKey = allowedFunctionalKeys.includes(e.key) || 
                          e.ctrlKey || e.altKey || e.shiftKey;
  
  // 既不是数字也不是功能键，就阻止输入
  if (!isDigit && !isFunctionalKey) {
    e.preventDefault();
  }
});

代码说明 #

1. 数字判断：用正则/^\d$/匹配e.key，不管是主键盘的0-9还是小键盘的数字，都能准确识别。
2. 功能键放行：
   • 直接放行常用编辑键：退格、删除、箭头键（光标移动）、Tab、Enter、空格等；
   • 放行带修饰键的操作：比如Ctrl+C、Ctrl+V这类复制粘贴操作，通过判断e.ctrlKey等修饰键来实现。
3. 废弃API替换：用e.key替代keyCode，这是现代浏览器推荐的方式，可读性和兼容性更好。

扩展：允许小数点或负号（可选） #

如果你的场景需要支持小数或者负数，可以在判断里加入这些字符，同时做额外的逻辑限制（比如只允许一个小数点、负号只能在开头）：

this.shadowRoot.querySelector('div').addEventListener('keydown', (e) => {
  const target = e.target;
  // 允许数字、小数点、负号
  const isAllowedChar = /^\d|\.|-$/.test(e.key);
  
  // 功能键判断和之前一致
  const allowedFunctionalKeys = [
    'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 
    'ArrowUp', 'ArrowDown', 'Tab', 'Enter', ' ', 
    'Home', 'End', 'PageUp', 'PageDown'
  ];
  const isFunctionalKey = allowedFunctionalKeys.includes(e.key) || 
                          e.ctrlKey || e.altKey || e.shiftKey;

  // 额外限制：小数点只能出现一次
  if (e.key === '.' && target.textContent.includes('.')) {
    e.preventDefault();
    return;
  }

  // 额外限制：负号只能在开头输入
  if (e.key === '-' && target.textContent.length > 0) {
    e.preventDefault();
    return;
  }

  // 既不是允许的字符也不是功能键，阻止输入
  if (!isAllowedChar && !isFunctionalKey) {
    e.preventDefault();
  }
});

这样修改后，你的contenteditable div就只能输入符合要求的数值，同时用户的正常编辑操作（比如移动光标、删除内容、复制粘贴）都不会受影响啦。

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