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

あなたは、関連するすべてのユーザーのキーボードを無効にすることができます（キープレス）= "なeventHandler（）" を使用します/ 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" />

使用することにより可能であるが、