HTML: Deaktivieren der Eingabe von Zahlen, aber die Pfeil nach oben und nach unten sollte funktionieren

Question

Ich habe diese Eingabe Typ Nummer, aber ich muss Benutzereingabe auf der Box deaktivieren. Der Pfeil nach oben und nach unten sollte die angezeigte Zahl erhöhen oder verringern.

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

Wie kann ich es funktioniert?

Answer 1

Sie können alle damit verbundenen Benutzer-Tastatur deaktivieren/Mausereignisse wie onKeyPress="return false", onCut="return false", onPaste="return false" als folgenden 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

Versuch (Druck) zu verwenden = "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(); 
} 

Answer 3

Es ist möglich, durch JQuery mit

$("[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" />