HTML：禁用数字输入，但向上和向下箭头应该有效

Question

我有这个输入类型编号，但我需要在框中禁用用户输入。向上和向下箭头应增加或减少显示的数字。

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

我怎样才能让它发挥作用？

Answer 1

可以使用Jquery

ch

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

Answer 2

您可以按照以下代码禁用所有相关用户键盘/鼠标事件，例如onKeyPress="return false"，onCut="return false"，onPaste="return false"：

.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 3

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

Answer 4

尝试使用（keypress）=“eventHandler（）”

<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.stopPropagation();
}