HTML: Disable number input but the up and down arrow should work

Question

I have this input type number but I need to disable user input on the box. The up and down arrow should increase or decrease the number displayed.

<td data-th="Quantity">
    <input type="number" min="1" max="99" class="form-control text-center" value="{{cartItem.quantity}}" formControlName="quantity" #itemQuantity>
</td>

How can I make it work?

Answer 1

You can disable all related user keyboard/mouse events like as onKeyPress="return false", onCut="return false", onPaste="return false" as following code:

.form-control {
  padding: 8px; 
  border: 1px solid #ccc; border-radius: 4px;
}

.text-center { text-align: center; }

<input type="number" min="1" max="99" class="form-control text-center" value="{{cartItem.quantity}}" formControlName="quantity" #itemQuantity
onkeypress="return false" 
ondragStart="return false" onselectstart="return false"       
oncut="return false" oncopy="return false" onpaste="return false" 
ondrag="return false" ondrop="return false" 
autocomplete="off"
>

Answer 2

<td data-th="Quantity">
    <input type="number" min="1" max="99" class="form-control text-center" value=" 
   {{cartItem.quantity}}" formControlName="quantity" (keypress)="eventHandler($event)"  
    #itemQuantity>
</td>

eventHandler(event){
   event.preventDefault();
}