输入如何只接受十六进制数字

Question

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

这是我的输入字段：

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

你认为我怎样才能做到这一点？

Answer 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 comment 但你需要像这样将 rgb 值转换为十六进制 post ，所以你需要使用十六进制格式设置默认值，然后当客户端更改时颜色你可以获得新的十六进制代码。基本代码如下

<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/

Answer 2

您可以将模式属性添加到输入中。这不会阻止用户写入无效信息，但在提交时会显示一条消息。另外，你可以添加一些样式来显示错误before提交。

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

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

Answer 3

试试这个

<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);
  }
})

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

输入如何只接受十六进制数字

How input accepts only HEX numbers

html

javascript

validation

hex