Как отключить поле ввода type = number от ввода значений с клавиатуры?

Question

У меня есть следующее поле ввода .Я хочу отключить опцию ввода, но все еще хочу сохранить опцию увеличения / уменьшения поля число , нажав.

Я использовал min и max , но это не такt помогает, когда я ввожу еще большее значение (например, 9999 ) нажатием клавиши.Это просто позволяет любое число с помощью нажатие клавиши .

Как мне решить ??

  <input 
       type="number"
       id="inputCart"
      min="1"
      max="20"
      onChange={(e) => this.onChangeQty(e)}

      />

РЕДАКТИРОВАТЬ:

<input className="text-center"
       type="number"
      min="1"
      class="numberInput"
      onChange={(e) => this.onChangeQty(e)}

      />
      
      
onChangeQty(e)
{
  const element = document.getElementsByClassName('numberInput');

function handleKeypress(e) {
  element[0].value = '';
    }

element[0].addEventListener('keyup', handleKeypress);
}

Он по-прежнему не работает и позволяет мне вводить любое значение нажатием клавиши

Answer 1

что вы можете сделать, это получить ссылку (getElementsByClassName) на ввод, который вы хотите заблокировать, и добавить addEventListener к событию keyUp, таким образом, каждый раз, когда пользователь вводит значение, вы 'Я сброшу значение ввода, и они не смогут набрать любое число внутри (Единственный способ, которым они могут добавить значение, это стрелки увеличения / уменьшения).Например:

const element = document.getElementsByClassName('numberInput');

function handleKeypress(e) {
  element[0].value = '';
}

element[0].addEventListener('keyup', handleKeypress);

<label for="numberInput">Number Input: </label>
<input type="number" name="quantity" min="1" max="100" class="numberInput">

Answer 2

 <input 
       type="number"
       id="inputCart"
      min="1"
      max="20"
      onChange={(e) => this.onChangeQty(e)}
      onKeyUp={e => e.preventDefault()}
      />

Установить onKeyUp, передать событие и запретить действие по умолчанию