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>

我该如何让它工作？

- Mix Austria

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"
>

- S.Serpooshan

---

请注意，其他答案不会防止用户将值复制粘贴到输入框中。 - S.Serpooshan

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

- kaushal shah

---

你介意加上一个简要的说明，解释一下这段代码的作用和为什么能起作用，这样这个答案也对“新手”有用吗？ - Fildor

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" />

- Surya Teja

---

为什么要在HTML中使用jQuery，如果你可以使用Angular2呢？ - Yoav Schniederman

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

- Yoav Schniederman