How to Stop Manual Input in a Type=Number But Still Allow Changes with The "Up/Down" Buttons

Is there a way to stop manual input in a type=number but still allow changes with the up/down buttons?

Is there any reason you are avoiding using a drop down select tag?
This will give the user a very limited choice of numbers (set to your preference).
You could even populate the <option> fields with numbers 1 through 100 (or whatever you choose) using PHP or JavaScript so you didn't have to manually type each number in the HTML code.

<select>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
</select>

Disable writing in input type number HTML5

If you are able/allowed to use jQuery, you can disable keypress on the type='number'.

$("[type='number']").keypress(function (evt) {
    evt.preventDefault();
});

This allows you to use up and down arrows on the input, but doesn't allow keyboard input.

How to make input type number un-editable but still functioning?

hello I have a working code but i think this is not the best way. I merged the answer from

How to disable backspace if anything other than input field is focused on using jquery

and the answer of TuomasK

here is the working code.

http://jsfiddle.net/vta96mp1/1/

HTML

<input class='testInput' id ='testid' value = '1' name='testname' type='number' min ='1'>

JS

$("#testid").keypress(function (evt) {
evt.preventDefault();
});

$(document).keydown(function(e) {
    var elid = $(document.activeElement).hasClass('textInput');
   console.log(e.keyCode + ' && ' + elid);
    //prevent both backspace and delete keys
    if ((e.keyCode === 8 || e.keyCode === 46) && !elid) {
        return false;
    };
});

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

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.

Remove increment and decrement icon from input field

Hidden in the comments in the post you linked is a suggestion to use the tel input type:

<input type="tel" value="111">

A few suggestions regarding the number type:

The number input type accepts min and max attributes to set number constraints.

<input min="1" max="10" type="number" value="1">

// no keyboard
document.getElementById("timer02_min").addEventListener("keydown", e => e.preventDefault());

// allow up/down keyboard cursor buttons
document.getElementById("timer02_min2").addEventListener("keydown", e => e.keyCode != 38 && e.keyCode != 40 && e.preventDefault());

no keyboard:
<input type="number" min="00" max ="99" id="timer02_min" 
        maxlength="2" value="00">
<br>
with up/down cursor keys:
<input type="number" min="00" max ="99" id="timer02_min2" 
        maxlength="2" value="00">

<input type="number" min="0" value="0" step="5" onkeydown="return false" />

span {
    position: relative;
    outline: 1px solid #00f;
}

span:after {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    outline: 1px solid red;
    width: 91%;
}

<input class="equipCatValidation" type="number" />

$('.equipCatValidation').on('keydown keyup change', function(e){
    if ($(this).val() > 100 
        && e.keyCode !== 46 // keycode for delete
        && e.keyCode !== 8 // keycode for backspace
       ) {
       e.preventDefault();
       $(this).val(100);
    }
});