使用CSS禁用输入字段-防止键盘操作

Question

我使用产品的数量输入字段，不想与它进行任何交互：

<input id="product-qty" type="number">

我的CSS如下：

#product-qty {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}  

但这还不够，当我选择选项卡时，我可以选择“数量”字段，然后我可以进行任何键盘输入。我可以接受选择数量字段，也许它在可访问性方面还是不错的选择，但不允许输入或删除任何内容。

我知道如何用JavaScript解决它，我想要知道的是仅使用CSS是否可行，如果可以的话-怎么做。

Fiddle example

Answer 1

如@ j08691所述，您可以使用readonly来防止与输入的任何交互。

<input readonly id="product-qty" type="number">