将visibility属性与focus/active伪元素结合使用来强制元素失去焦点是错误的吗？ [已关闭]

Question

我正在尝试仅使用 CSS 来“禁用”输入元素，以阻止用户将注意力集中在特定的 DOM 元素上。这是一个古老的（并且得到很好回答的）问题，涉及使用指针事件、用户选择等（例如如何使用 CSS 禁用表单字段？）。但这些解决方案需要 JavaScript 和 HTML 代码。链接中没有提供干净的CSS解决方案。

但我可能偶然发现了一个独特的解决方案。这可能看起来“邪恶”，但非常有用并且适合该任务。这是CSS：

& .readonly :is(input, textarea, .custom-input) {
  &:is(:focus,:active) {
    pointer-events: none;
    user-select: none;
    visibility: hidden;
  }
}

这个CSS的效果是，当一个元素获得焦点时，它的可见性被设置为隐藏。这会立即导致元素失去焦点，因为隐藏元素无法获得焦点。因此该元素永远不会获得焦点。这适用于鼠标单击，更重要的是，当使用 Tab 键切换到元素时也适用。

我花了一些时间看看是否有人已经提出了这个解决方案，但没有成功。所以这是问题。将可见性属性与 focus/active 伪元素结合使用是否有意义。或者这是一个非常糟糕的主意？

Answer 1

在这里，我引用你的声明“.....当他们的安全级别不足时。”这意味着那里有一个 if 语句，它可以让 javascript 发挥作用，所以为了顺利进行，你可能需要一些 javascript 代码，如果你希望; CSS：

   input:disabled {
   pointer-events: none; /* Disable pointer events */
   opacity: 0.5;
   }
 **THE JAVASCRIPT CODE:**

   const securityLevel = getSecurityLevel();    if (securityLevel === 'insufficient') {    document.querySelectorAll('input').forEach(input => {    input.setAttribute('disabled', 'disabled');    });    } else {    document.querySelectorAll('input').forEach(input => {    input.removeAttribute('disabled');    });    }