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

可以禁用所有相關用戶的鍵盤/鼠標事件如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 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.stopPropagation(); 
} 

Answer 3

有可能通過使用jQuery

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type = "number" value="3" />