Как я могу отключить ввод с клавиатуры на html вводе номера типа? А как насчет реагировать или материал-интерфейс?

Question

У меня есть <input> тег type="number", и я хотел бы отключить ввод с клавиатуры, чтобы заставить пользователя изменять значение с помощью счетчика (стрелки вверх и вниз). Я использую входное значение при каждом изменении, поэтому я хочу сделать это, чтобы мне не нужно было проверять пользовательский ввод в режиме реального времени, что кажется единственной альтернативой.

За пределами vanilla html и javascript, я также хотел бы знать, как это сделать в реагируют и material-ui . Если у меня есть что-то вроде следующего, как я могу предотвратить ввод с клавиатуры?

  const [value, setValue] = useState(10);

  return (
    <React.Fragment>
      <TextField
        name="name"
        type="number"
        label="label"
        inputProps={{
          min: 0,
          max: 100,
          step: 2,
        }}
        defaultValue={value}
        onChange={(event) => {
          setValue(Number(event.target.value));
        }}
      />
    </React.Fragment>
  );

Answer 1

Это похоже на базовый c вопрос, но я был удивлен, что нигде не смог найти ответ, поэтому я привожу его здесь.

Ключ в обоих случаях - захват onkeydown событие и запуск его метода preventDefault().

Ваниль HTML и javascript

  <input type="number" min="0" max="100" step="2" value="10"
    onkeydown="preventKeyboardInput(event)" />

  <script>
    function preventKeyboardInput(event) {
      event.preventDefault();
    }
  </script>

Реакция

  <input
    type="number"
    min={0}
    max={100}
    defaultValue={10}
    step={2}
    onKeyDown={(event) => {
      event.preventDefault();
    }}
  /> 

Material-UI

Material-UI's <TextField> - это обертка вокруг <input> реакции, поэтому все, что вам нужно сделать, это передать onKeyDown через inputProps, который вы уже используют для передачи min, max и defaultValue.

  const [value, setValue] = useState(10);

  return (
    <React.Fragment>
      <TextField
        name="name"
        type="number"
        label="label"
        inputProps={{
          min: 0,
          max: 100,
          step: 2,
          onKeyDown: (event) => {
             event.preventDefault();
          },
        }}
        defaultValue={value}
        onChange={(event) => {
          setValue(Number(event.target.value));
        }}
      />
    </React.Fragment>
  );