我正在尝试仅使用 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 键切换到元素时也适用。
我花了一些时间看看是否有人已经提出了这个解决方案,但没有成功。所以这是问题。 将可见性属性与焦点/活动伪元素结合使用是否有意义。或者这是一个非常糟糕的主意?
在这里,我引用你的声明“.....当他们的安全级别不足时。”这意味着那里有一个 if 语句,它可以让 JavaScript 发挥作用,所以为了顺利进行,你可能需要一些 JavaScript 代码,如果你希望;
CSS:
input:disabled {
pointer-events: none; /* Disable pointer events */
opacity: 0.5;
}
JAVASCRIPT 代码:
const securityLevel = getSecurityLevel();
if (securityLevel === 'insufficient') {
document.querySelectorAll('input').forEach(input => {
input.setAttribute('disabled', 'disabled');
});
} else {
document.querySelectorAll('input').forEach(input => {
input.removeAttribute('disabled');
});
}