第一次提问(所以我们开始了)
希望仅使用 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 键切换到元素时也适用。
我花了一些时间看看是否有人已经提出了这个解决方案,但没有成功。所以这是问题。 将可见性属性与焦点/活动伪元素结合使用是否有意义。或者这是一个非常糟糕的主意?
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');
});
}