时间戳

首页 > 解决方案 > 使用 CSS 禁用输入字段 - 防止键盘操作

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

问题描述

我对产品使用数量输入字段，并且不想允许与它进行任何交互：

<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 以及如果是 - 怎么做。

小提琴示例

标签： css

解决方案

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

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

推荐阅读