Как ограничить ввод пользователя шестнадцатеричным значением в React?

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]+" означает, что пользователь может ввести все, что он хочет, и тогда проверка будет выполняться, когда он нажимает на кнопку отправки формы.
Что я хотел бы, это:

Когда пользователь нажимает на любую букву или цифру, которая не ' t шестнадцатеричное, значение ввода не изменится. Так же, как когда тип ввода - число, и пользователь пытается ввести текст.

Возможно ли это реализовать?

Answer 1

Во избежание недопустимого ввода (the input value would not change):

Добавить условие регулярного выражения в функцию-обработчик можно.

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

• Контрольный пример: шестнадцатеричный: https://www.regextester.com/93640

const {useState} = React;

const 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">
      <input
        id="numeroSerie"
        name="num_serie"
        value={value}
        onChange={onChange}
      />
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));

    <div id="root"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

Answer 2

Это решение использует событие onkeyup элемента input для проверки содержимого на произвольное регулярное выражение. Это означает, что элемент input может на мгновение отобразить недопустимый символ, но после того, как тест регулярного выражения обнаружит, что содержимое является недопустимым, предыдущее содержимое будет восстановлено. Использование события 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">