仅限 CSS：“禁用”输入元素并停止使用 Tab 键切换到元素的功能

Question

第一次提问（所以我们开始了）

希望仅使用 CSS 来“禁用”输入元素，以阻止用户在安全级别不足时在屏幕上输入数据。这是一个古老的（并且得到很好回答的）问题，涉及使用指针事件、用户选择等（例如how-do-i-disable-form-fields-using-css）。但这些解决方案似乎很快就停止了，因为用户可以通过 Tab 键切换到某个元素。

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

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

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

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

Answer 1

here you go i quote from your statement **"..... when their security level is insufficient."** it means there is an if statement there which brings javascript to play so to go well you might some javascript codes and if you wish;

**THE 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');
    });
    }