如何在数字类型的 html 输入上禁用键盘输入？在 React 或 Material-ui 中怎么样？

Question

我有一个<input>标签type="number"，我想禁用键盘输入，以强制用户使用微调器（向上和向下箭头）更改值。我在每次更改时都会消耗输入值，因此我想这样做，这样我就不必实时验证用户输入，这似乎是唯一的选择。

除了普通的 html 和 javascript 之外，我还想知道如何在React和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

这似乎是一个基本问题，但令我惊讶的是无法在任何地方找到答案，所以我在这里提供一个。

这两种情况的关键是捕获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();
    }}
  /> 

材质-UI

Material-UI<TextField>是 React 的包装器<input>，因此您需要做的就是onKeyDown向下传递 via 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>
  ); 

更新：我发现这会破坏触摸设备上的输入框，或者至少破坏 iOS 和 iPadOS，它们都不会显示或允许来自旋转器的输入，这可能就是它首先被否决的原因。任何想要使用此方法的人请注意买者自负。