如何让input输入框仅支持输入HEX十六进制合法字符

下面提供3种不同场景的实现方式，可根据需求组合使用：

方案1：原生HTML属性校验（无需JS，最简实现） #

直接给input标签添加pattern属性，利用浏览器原生表单校验能力实现提交校验，修改后的代码如下：

<input type="text" class="form-control" tabindex="9" maxlength="2"
  pattern="^[0-9A-Fa-f]*$"
  title="仅允许输入0-9数字、A-F/a-f字母">

该方案会在表单提交时自动校验，不符合规则会弹出title中的提示文案，无需额外写JS代码，缺点是不会实时拦截用户输入的非法字符。

方案2：JS实时拦截非法输入（体验最优） #

监听输入事件自动过滤非法字符，用户输入不符合规则的内容会被直接清除，首先给input添加id方便选择：

<input type="text" id="hexInput" class="form-control" tabindex="9" maxlength="2">

然后添加对应的JS逻辑：

const hexInput = document.getElementById('hexInput');
hexInput.addEventListener('input', function() {
  // 过滤所有非十六进制字符，同时可按需转成大写
  this.value = this.value.replace(/[^0-9A-Fa-f]/g, '').toUpperCase();
});

如果要求仅支持大写A-F，可把正则中的a-f去掉，仅保留/[^0-9A-F]/g即可。

方案3：提交前二次校验（兜底保障） #

为了避免特殊场景绕过前端校验，建议在表单提交逻辑中新增一层兜底校验：

// 校验方法
function isHexValid(value) {
  const hexRule = /^[0-9A-Fa-f]+$/;
  return hexRule.test(value);
}

// 绑定表单提交事件
document.querySelector('form').addEventListener('submit', function(e) {
  const inputValue = document.getElementById('hexInput').value.trim();
  if (inputValue && !isHexValid(inputValue)) {
    e.preventDefault();
    alert('请输入合法的十六进制字符，仅支持0-9数字、A-F/a-f字母');
    return false;
  }
  // 其他正常提交逻辑
});

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