如何限制inline-block空白字段仅允许输入单字节字母数字字符

不存在能实现该需求的纯CSS方案。CSS仅负责元素样式渲染，不具备输入内容拦截、字符校验的能力，要限制contenteditable元素仅允许输入半角单字节英文字母、数字，必须通过JavaScript实现输入拦截和内容过滤。

你现有的HTML、CSS代码不需要修改，只需要补充对应的JS逻辑即可，要覆盖手动键盘输入、粘贴、输入法输入、拖拽插入内容等所有可能修改元素内容的场景，避免漏过非法字符。

把下面的JS代码加到页面脚本里即可：

const codeTextNode = document.querySelector('#CodeText');

// 1. 拦截键盘直接输入，提前阻止非法字符录入
codeTextNode.addEventListener('keypress', e => {
  const code = e.keyCode || e.which;
  // 放行退格、删除、方向键、回车、Tab这类控制按键
  const allowedControlKeys = [8, 9, 13, 37, 38, 39, 40, 46];
  if (allowedControlKeys.includes(code)) return;
  // 非0-9、A-Z、a-z范围的字符直接阻止输入
  if (code < 48 || (code > 57 && code < 65) || (code > 90 && code < 97) || code > 122) {
    e.preventDefault();
  }
});

// 2. 处理粘贴场景，过滤粘贴内容里的非法字符
codeTextNode.addEventListener('paste', e => {
  e.preventDefault();
  const pasteContent = (e.clipboardData || window.clipboardData).getData('text');
  const validContent = pasteContent.replace(/[^a-zA-Z0-9]/g, '');
  // 把过滤后的合法内容插入当前光标位置
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(validContent));
});

// 3. 兜底校验：处理中文输入法输入、拖拽插入内容等前面事件没覆盖到的场景
codeTextNode.addEventListener('input', () => {
  const originalText = codeTextNode.textContent;
  const validText = originalText.replace(/[^a-zA-Z0-9]/g, '');
  if (originalText !== validText) {
    codeTextNode.textContent = validText;
    // 修正光标位置到内容末尾，避免过滤内容时光标跳转到开头
    const range = document.createRange();
    const sel = window.getSelection();
    range.selectNodeContents(codeTextNode);
    range.collapse(false);
    sel.removeAllRanges();
    sel.addRange(range);
  }
});

• 如果业务允许替换元素，更推荐使用原生<input>元素实现该需求，给input加inputmode="text"、pattern="[a-zA-Z0-9]+"属性，配合简单的输入过滤即可，不会出现contenteditable元素常见的光标位置异常、富文本格式残留问题。
• 前端输入拦截仅用于提升用户体验，无法作为数据合法性的最终校验依据，数据提交到服务端时必须再次做格式校验，用户可以轻易绕过前端限制提交非法内容。

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