Number input limiting max length [duplicate]

Question

I have a simple number input in react component. I need to make it not accept more than 4 characters. But it doesn't work with maxLength attribute. What else i can do to prevent it taking more than 4 characters.

<input type="number" onchange={handleChange} 



<input type="number"/>




/>

Answer 1

The handleChange function checks if the input value is greater than or equal to -9999 or less than equal to 9999.

import "./styles.css";

import React, { useState } from "react";

export default App = () => {
  const [inputValue, setInputValue] = useState("");
  const handleChange = (event) => {
    const nextValue = event.target.value;

    if (nextValue >= 0 && nextValue <= 9999) {
      setInputValue(nextValue);
    }
    if (nextValue < 0 && nextValue * -1 <= 9999) {
      setInputValue(nextValue);
    }
  };

  return (
    <div>
      <label htmlFor="fourCharInput">Enter up to 4 digit number:</label>
      <input type="number" value={inputValue} onChange={handleChange} />
    </div>
  );
};

If you wanna play around with the code, here is the sandbox.

Answer 2

you can add readonly attribute to the input when your hook gets 4 characters