输入如何仅接受 HEX 数字答案

【问题标题】：How input accepts only HEX numbers输入如何仅接受 HEX 数字
【发布时间】：2022-01-09 19:14:05
【问题描述】：

我有一个输入字段，我想给这个字段一个只接受十六进制数字的验证。所以它应该接受从 0 到 9 的数字和从 A 到 F 的字母。

这是我的输入字段：

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

你觉得我怎么能做到这一点？

【问题讨论】：

使用正则表达式[xX][0-9a-fA-F]+检查输入值
尝试使用 input type="color" 代替，一个颜色选择器。有关更多详细信息，请查看此link
我该怎么做？ @MuXeD
pattern="[0-9a-fA-F]+" 应该将此添加到我的输入字段中吗？ @MuXeD

标签： javascript html validation hex

【解决方案1】：

你可以使用正则表达式来解决你的问题，我为你的输入写了一个简单的例子

<input type="text" id="hex_code" name="hex_code" pattern="#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?" title="in valid hex code"><br><br>

另一个选项是输入类型颜色，如@groov_guy 评论，但您需要像这篇文章一样将 rgb 值转换为十六进制，因此您需要使用十六进制格式设置默认值，然后当客户端更改颜色时，您可以获得新的十六进制代码。基本代码如下

<input type="color" onchange="printColor(event)" value="#ff0000">

function printColor(ev) {
  const color = ev.target.value;
  console.log(color) // you can get hex value
  
}

sample link

https://css-tricks.com/color-inputs-a-deep-dive-into-cross-browser-differences/

【讨论】：

您的模式错误，您缺少 # 并且十六进制是 3 或 6 长绝对不是 32。这可能算作完整的十六进制模式 #[0-9a-fA-F]{3}([0-9a-fA-F]{3})?
@Akxe İ 使用您的正则表达式模式编辑谢谢

【解决方案2】：

试试这个

<input type="text" class="form-control" onchange="validate($event)" tabindex="9" maxlength="2">

在你的.js

validate(event) {
   let regEx = "^[-+]?[0-9A-Fa-f]+\.?[0-9A-Fa-f]*?$";
   let isHex = regEx.match(event.target.value);
   // Do things with isHex Boolean
}

编辑：如果你需要阻止你可以做这样的事情

var input = document.getElementById('input');
input.addEventListener('keyup', (event) => {
  let regEx = /^[0-9a-fA-F]+$/;
  let isHex = regEx.test(event.target.value.toString());
  if(!isHex) {
    input.value = input.value.slice(0, -1);
  }
})

&lt;input type="text" class="form-control" id="input" tabindex="9" maxlength="2"&gt;

【讨论】：

如果你只需要颜色，正则表达式是\b[0-9A-Fa-f]{6}\b
这是一个很好的答案，谢谢。但是有什么解决办法可以避免输入错误的值吗？例如，在这种情况下不输入'w'？
我不需要这个颜色。我想验证输入字段，不允许用户输入 RegExp 以外的其他内容，并且用户应该只能输入两位数，这可以通过 maxlength="2" 解决
是的，您可以测试该值，如果无效则阻止输入。我编辑我的答案

【解决方案3】：

您可以将模式属性添加到输入。这不会阻止用户写入无效信息，但在提交时会显示一条消息。此外，您可以添加一些样式以显示在之前提交有问题。

<input type="text" class="form-control" tabindex="9" maxlength="2" pattern="[0-9a-fA-F]+">

<style>
input:invalid {
  border: red solid 3px;
}
</style>

【讨论】：