css - 使用 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;
}  

但这还不够，当我使用 TAB 键时，我可以选择数量字段，然后按我喜欢的方式进行任何键盘输入。我可以接受选择数量字段，也许它在可访问性方面甚至很好，但不允许输入或删除任何内容。

我知道如何用 JavaScript 解决它，我想知道是否只用 CSS 可行，如果可行 - 如何解决。

Fiddle example

Answer 1

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

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