Javascript 需要鼠标单击的输入字段

Javascript 需要鼠标单击的输入字段,javascript,html,validation,input,anti-bot,Javascript,Html,Validation,Input,Anti Bot,我正在构建一个简单的HTML页面,我有一个输入字段,后跟一个搜索按钮;代码如下: <input type="text" id="sfield" placeholder="Write something"> <button id="search">Search!</button> 搜索将启动,但“Some stuff”字符串不会保存,就好像用户单击了搜索按钮而没有在搜索字段中写入内容一样。此外,添加行 document.getElementById('

我正在构建一个简单的HTML页面,我有一个输入字段,后跟一个搜索按钮;代码如下:

<input type="text" id="sfield" placeholder="Write something">
<button id="search">Search!</button>
搜索将启动,但“Some stuff”字符串不会保存,就好像用户单击了搜索按钮而没有在搜索字段中写入内容一样。此外,添加行

    document.getElementById('sfield').focus();
也应该什么都不做,这样将光标放在字段中的唯一方法就是用户手动操作

我想知道是否有可能做出这样的事情;我已经使用EventListener将搜索字段设置为空,但是我不知道如何让脚本识别用户是否将光标放在字段上


我不想使用JQuery,但它也可以。任何想法都会被广泛接受。谢谢。

在这种情况下,程序需要保留状态。我会这样做


搜索!
const inputField=document.getElementById('sfield');
const searchButton=document.getElementById('search');
inputField.onfocus=()=>{
setAttribute(“数据已验证”、“为真”)
}
searchButton.onclick=()=>{
const isValidated=inputField.getAttribute(“数据已验证”);
log('已验证:'+已验证);
}

在这种情况下,程序需要保留状态。我会这样做


搜索!
const inputField=document.getElementById('sfield');
const searchButton=document.getElementById('search');
inputField.onfocus=()=>{
setAttribute(“数据已验证”、“为真”)
}
searchButton.onclick=()=>{
const isValidated=inputField.getAttribute(“数据已验证”);
log('已验证:'+已验证);
}

通常,这两种解决方案都不会阻止使用浏览器的bot(运行javascript的bot)。没有100%的解决方案,但有比检查某个东西是否有焦点更强的解决方案。请记住,javascript环境是完全可以从浏览器端控制的。例如,要通过您的安全性,我所要做的就是将相关输入的状态更改为data validated=“true”,这样您的安全性就会崩溃

然而,浏览器供应商已经考虑到了这种可能性,并为您提供了一个鲜为人知的解决方案。查看来自鼠标单击或按键的事件数据。可以生成此事件数据。过去,在旧浏览器中,只需使用new event()就可以更容易地欺骗事件,但现在的浏览器将特定事件用于键盘和鼠标。使欺骗变得非常困难的部分是,在这种情况下,存在只读的属性。更具体地说,有一个名为“trusted”的事件属性不能由javascript设置。如果您欺骗MouseEvent或KeyboardEvent,“trusted”属性设置为false,但如果您使用实际的鼠标或键盘,“trusted”则设置为true

有关isTrusted属性的信息,请单击此处:

注意:这也不是100%,因为机器人可以运行键盘/鼠标宏来创建真正的“受信任”事件。然而,由于许多人不知道这种安全技巧,这确实使系统更难破解,而且大多数机器人不会内置鼠标/键盘控制。如果您遇到一个使用鼠标/键盘的bot,您就减少了安全性,可以对事件和界面使用情况进行进一步分析

如果您将此方法与其他方法(如浏览器指纹识别等)相结合,则会使您的整体反机器人安全性大大增强,并阻止更多可能的机器人


编辑:不要只使用此方法和其他方法,混淆您的代码,以便任何攻击者都必须花时间去过滤和遍历一组标签不好的函数和加密字符串,如果他们想了解您的安全性是如何工作的。

通常,这两种解决方案都不会阻止使用浏览器的机器人(这是一个运行javascript的机器人)。没有100%的解决方案,但有比检查某个内容是否有焦点更强的解决方案。请记住,javascript环境完全可以从浏览器端控制。例如,我要做的就是通过您的安全设置,将相关输入的状态更改为data validated=“true”您的安全性就会崩溃

但是,浏览器供应商已经考虑到了这种可能性,并为您提供了一种鲜为人知的解决方案。查看来自鼠标单击或按键的事件数据。可以生成此事件数据。在旧浏览器中,仅使用new event()来欺骗事件更容易,但现在现代浏览器对键盘和鼠标使用特定事件。欺骗这些事件非常困难的一部分是,在事件中有只读属性。更具体地说,有一个名为“trusted”的事件属性不能由javascript设置。如果你欺骗MouseeEvent或KeyboardEvent,则“trusted”属性属性设置为false,但如果使用实际的鼠标或键盘,“trusted”设置为true

有关isTrusted属性的信息,请单击此处:

注意:这也不是100%,因为机器人可以运行键盘/鼠标宏来创建真正的“受信任的”事件。但是,由于许多人不知道这一安全技巧,这确实使系统更难破解,而且大多数机器人不会内置鼠标/键盘控制。如果你遇到使用鼠标/键盘的机器人,你就减少了安全性,可以进一步分析事件和界面使用情况

如果您将此方法与其他方法(如浏览器指纹识别等)相结合,则会使您的整体反机器人安全性大大增强,并阻止更多可能的机器人

编辑:不要只使用此方法和其他方法,混淆您的代码,以便任何攻击者都可以
    document.getElementById('sfield').focus();
<input type="text" id="sfield" placeholder="Write something" data-validated = "false">
<button id="search">Search!</button>

<script>
   const inputField = document.getElementById('sfield');
const searchButton = document.getElementById('search');

inputField.onfocus = () => {
    inputField.setAttribute("data-validated", "true") 
}
searchButton.onclick = () => {
    const isValidated = inputField.getAttribute("data-validated");
    console.log('Is Validated: ' + isValidated);
}
</script>