javascript - How can I disable keyboard input on an html input of type number? What about in react or material-ui? - Stack Overf

admin管理员组

文章数量:1341902

I have an <input> tag of type="number", and I would like to disable keyboard input in order to force the user to change the value with the spinner (up and down arrows). I am consuming the input value on every change, so I want to do this so that I don't have to validate user input in real-time, which seems like the only alternative.

Outside of vanilla html and javascript, I would also like to know how to do this in react and material-ui. If I have something like the following, how can I prevent keyboard input?

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

I have an <input> tag of type="number", and I would like to disable keyboard input in order to force the user to change the value with the spinner (up and down arrows). I am consuming the input value on every change, so I want to do this so that I don't have to validate user input in real-time, which seems like the only alternative.

Outside of vanilla html and javascript, I would also like to know how to do this in react and material-ui. If I have something like the following, how can I prevent keyboard input?

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

• javascript
• html
• reactjs
• material-ui

Share Improve this question Follow asked Apr 14, 2020 at 2:45 thisisrandythisisrandy 3,07533 gold badges1515 silver badges2727 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

This seems like a basic question, but I was surprised to not be able to find the answer anywhere, so I'm providing one here.

The key in both cases is to capture the onkeydown event and run its method preventDefault().

Vanilla HTML and javascript

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

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

React

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

Material-UI

Material-UI's <TextField> is a wrapper around react's <input>, so all you need to do is pass onKeyDown down via inputProps, which you are already using to pass min, max, and 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>
  ); 

---

UPDATE: I've discovered roundabout that this breaks input boxes on touch devices, or at the very least iOS and iPadOS, neither of which display or allow input from spinners, which is probably why it was downvoted in the first place. Caveat emptor for anyone wanting to use this method.

本文标签：