是否可能只允许用户在html输入中输入十六进制值？

Question

这是我的输入：

这是它的定义：

 <Input
                // type="number"
                id="numeroSerie"
                name="num_serie"
                defaultValue={this.state.num_serie}
                onChange={this.onChange}
                required
                pattern="[a-fA-F0-9]+"
                maxlength="1"
              />

使用pattern="[a-fA-F0-9]+"表示用户可以输入他想要的任何内容，然后在单击表单提交按钮时将执行验证。我想要的是：当用户单击非十六进制的任何字母或数字时，输入值将保持不变。就像输入类型是数字一样，并且用户尝试输入文本时。这可能实现吗？

Answer 1

为了避免非法输入（the input value would not change）：

在处理程序函数内添加一个正则表达式条件就可以了。

/^[0-9a-f]+$/.test(yourValue) // hexadecimal

import React, { useState } from "react";
import "./styles.css";
export default function App() {
  const [value, setValue] = useState("");
  const onChange = e => {
    const input = e.currentTarget.value;
    if (/^[0-9a-f]+$/.test(input) || input === "") {
      setValue(input);
    }
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <input
        id="numeroSerie"
        name="num_serie"
        value={value}
        onChange={onChange}
      />
    </div>
  );
}

[在线试用：

测试用例：

十六进制：https://www.regextester.com/93640

Answer 2

此解决方案使用输入元素的onkeyup事件来针对任意正则表达式测试内容。这意味着输入元素可能会暂时显示一个非法字符，但是在正则表达式测试显示该内容为非法后，先前的内容将被恢复。使用onkeyup事件可大大简化处理。

function setupField(field, re)
{
    field.autocomplete = "off";
    field.saveValue = field.value;
    field.onkeyup = function() {
        var v = field.value;
        if (v === '' || re.test(v)) {
            field.saveValue = v;
        }
        else {
            field.value = field.saveValue;
        }
    };
}

setupField(document.getElementById('hex'), /^[A-Fa-f0-9]+$/);

<input type="text" id="hex" size="8">