如何使用JavaScript和jQuery以编程方式在网页输入字段上直观地模拟键盘按键？

我想自动化网站的登录过程。 此网站登录页面有一个用户名

字段和

id=“username”

，以及一个密码

字段和

id=“pwd”

，还有一个提交按钮

字段和

id=“login”

，以及

type=“submit”

这个网站有一些内置JavaScript来处理键盘上的keydown/keydup/input事件，它们验证用户名输入字段中输入的字符，因此输入的字符必须是

xxx@xxx

启动登录请求前设置格式

在我的脚本中，我首先尝试使用jQuery：

$("#username").val("me@hotmail.com");
$("#pwd").val("ticket");
$("#login")[0].click();

这可以正确地将“用户名”字段填充为“me@hotmail.com“，但这种方法的问题是内置脚本中的验证代码没有被触发，因此登录失败

然后我通过模拟输入这些字符来尝试这些功能，”a@h“：

我可以看到，通过在此字段上添加事件侦听器，这些事件可以成功触发

$("#username" ).on( "keydown", function(e) { console.log('    key downed: ' + (e.which || e.KeyCode ) ); });
$("#username" ).on( "keyup", function(e) { console.log('    key upped: ' + (e.which || e.KeyCode ) ); });

我可以看到日志消息，然后删除了上面的侦听器，因为它们将覆盖此输入字段上的网站内置事件处理程序

当我运行上述代码时，我无法直观地看到“a@h在输入中，尽管这些事件根据日志消息成功触发，但登录仍然失败

我在Chrome浏览器上进行了测试，打开了Chrome调试工具，并在“事件侦听器断点”窗格中启用了键盘/keydown/keydup事件断点。但是当我运行代码时，这些断点没有中断，因此内置的验证代码没有执行，因此登录仍然失败

我的问题是：

---

如何对事件触发逻辑进行编码，以便在触发这些事件时，可以执行网站内置的事件处理程序，并且，我可以在uesrname输入字段中直观地看到输入的字符，就像计算机被黑客攻击一样，您正在观看黑客实时将字符输入到输入字段。

在HTML5表单字段上有一个

.checkValidity（）

API可用于此目的。按原样用.val（）填充它，并调用原始DOM节点上的checkValidity方法来触发浏览器的内置处理。更多信息：

我在Chrome控制台上尝试了这些：

document.getElementById("i0116").value = "h@hotmail.com"  
document.getElementById("i0118").value = "123456"  
document.getElementById("i0116").checkValidity();  
document.getElementById("idSIButton9").click();  

尽管，

checkValidity（）

返回true，但站点脚本中的keydown/up事件处理程序仍然没有触发，登录仍然失败，它报告错误“请以以下格式输入您的电话号码或电子邮件地址”someone@example.com“

必须有一种方法可以通过编程模拟输入中的按键来触发验证脚本

我正在测试的网站是，用户名输入有一个默认的“电子邮件或电话”文本覆盖

document.getElementById（“i0116”）.value=”h@hotmail.com

只会将“电子邮件或电话”与另一层文本重叠h@hotmail.com“输入到输入字段中

---

在Chrome中打开“”，你会明白我的意思。

我搜索了谷歌，从其他相关答案中得出以下结论：

• 马克斯·沙瓦布基
• 保罗S

我不认为他们的工作值得赞扬，只是我把这两种方法结合了一点独创性。所以，在你接受我的回答之前，请投票支持他们的工作

工作JSFIDLE示例：

---

谢谢，@yaycmyk我试过你的建议，但没用。详情如下。一些

更改

，

按键

，

按键

或

提交

事件，以触发验证。谢谢，@Alexander Dixon。我对此进行了测试，发现如果我想直观地看到输入的字符，需要使用.val（）而不是.text（）之类的。尽管如此，它仍然不起作用，仍然会出现错误消息“请在格式中输入您的电话号码或电子邮件地址someone@example.com单击“登录”按钮时，尽管我在模拟按键后添加了document.getElementById（“i0116”）.checkValidity（）。在我看来，这种方法无法触发网站内置的验证，因此仍然失败。@cobe24，感谢您的反馈。我甚至尝试进一步利用Chrome的

TamperMonkey

扩展。我的发现是，微软肯定是在利用一些顶级安全措施来100%检测输入是人工键盘输入还是程序输入。因此，您可以阅读

http://knockoutjs.com/documentation/binding-syntax.html

他们这样做的方法。对于复制/粘贴事件，可能仍然有一些方法，但是对于keydown和keypress来说，隐藏的验证太严格了。

document.getElementById("i0116").value = "h@hotmail.com"  
document.getElementById("i0118").value = "123456"  
document.getElementById("i0116").checkValidity();  
document.getElementById("idSIButton9").click();  

jQuery.fn.simulateKeyPress = function (character) {
  // Internally calls jQuery.event.trigger
  // with arguments (Event, data, elem). That last arguments is very important!
  jQuery(this).trigger({ type: 'keypress', which: character.charCodeAt(0) });
};

jQuery(document).ready(function ($) {
  // Bind event handler
  $('textarea').keypress(function (e) {
    //alert(String.fromCharCode(e.which));
    console.log(String.fromCharCode(e.which));
    var initialVal = $(this).text();
    var newVal = initialVal.toString() + String.fromCharCode(e.which);
    $(this).text(newVal);
    console.log("New Value: " + newVal);
    //String.fromCharCode(e.which)
  });
  // Simulate the key press
  $('textarea').on('focus', function(e) {
  //this could have been done with a for loop or the jQuery $.each() method by utilizing strings and arrays.
    $(this).simulateKeyPress('t');
    $(this).simulateKeyPress('e');
    $(this).simulateKeyPress('s');
    $(this).simulateKeyPress('t');
  });
  $('textarea').focus();  
});