对人类隐藏元素，但对机器人隐藏答案

【问题标题】：Hide elements from humans, but not bots对人类隐藏元素，但对机器人隐藏
【发布时间】：2021-10-08 23:10:30
【问题描述】：

我正在使用Qualtrics survey software，但遇到了机器人问题。他们自己的机器人检测工具是不够的。

我想检测机器人是否正在填写表单。为此，我想我会将一个字段的颜色更改为全白（与背景颜色相同）。以下 CSS 不可以这样做：

#ID > * {
  background-color: white !important;
  color: white ! important;
}

以下 JavaScript 也不起作用：

var nodes = document.getElementById('ID').childNodes;
for(var i = 0; i < nodes.length; i++){
    if(nodes[i].nodeName.toLowerCase() == 'div'){
        nodes[i].style.backgroundColor = 'white !important';
        nodes[i].style.color = 'white !important';
    }
}

如何定位一个元素及其所有子元素并使它们对人眼不可见，但对计算机不可见？

关于 Qualtrics 的 MWE

https://uwartsandsciences.sjc1.qualtrics.com/jfe/form/SV_5sYhuvDNJcRpdS6

第一个问题（ID == QID1）我想对人眼隐藏。第二个可以保持可见。

【问题讨论】：

I want to detect if a bot is completing the form. To do so, I thought I would change the colors of one field to be all white (same color as the background) -- 出于好奇，为机器人提供白色背景和文本输入字段的目的到底是什么？
@AndrewL64，人类不会看到这个输入并且会跳过它。然而，机器人会看到这个输入，然后选择一个响应。
@David 也许与 Qualtrics 本身有关。这是一个可以玩的 MWE：uwartsandsciences.sjc1.qualtrics.com/jfe/form/…#QID1，这是我想隐藏的孩子。
为什么不直接使用visibility: hidden;，一个简单的 JS 数学挑战或验证码？
您的意思可能是#ID * { background-color: white !important; color: white ! important; } 当您添加> 时，它只适用于直系子代。

标签： javascript css

【解决方案1】：

display: none;

如果您要设置蜜罐，请将其放在您想要隐藏的输入字段中。

人类不会看到它，但机器人会在阅读 html 时看到它。

Honeypot implementation

【讨论】：