在Chrome中模拟keydown事件 [英] Simulating keydown event in Chrome
问题描述
我试图在Google Chrome控制台中模拟keydown事件。我感兴趣的网站是web.whatsapp.com，关注的内容是 document.getElementsByClassName（input-search）[0];
我试图做的是，当某个字段输入某个文本时，该字段下方显示的联系人列表将更新为包含该文本字段内容的联系人。
在尝试其他任何事情之前，我只需使用此答案将焦点设置到此文本字段。
我试过的东西是：
-
https://stackoverflow.com/a/12187302/1291122 - 没有任何反应，也没有元素在显示的联系人列表中更新。
-
https://stackoverflow.com/a/10520017/ 1291122 - 没有任何反应。同样的结果
还有一些其他来源。但没有任何工作。如何使用JavaScript控制台模拟确切的效果（在文本字段中输入一些文本并查看联系人列表更新）？
我的Chrome版本是最新版本截至撰写答复之日 - 41.0.2272.101
编辑：
下面是我有的一个示例代码试过。 （从上面的答案3开始）
$ $ p $ $ $ $ $ $ $ $ $ $input-search）。 focus（）;
Podium = {};
Podium.keydown = function（k）{
var oEvent = document.createEvent（'KeyboardEvent'）;
// Chromium Hack
Object.defineProperty（oEvent，'keyCode'，{
get：function（）{
return this.keyCodeVal;
}
}）;
Object.defineProperty（oEvent，'which'，{
get：function（）{
return this.keyCodeVal;
}
}）;
if（oEvent.initKeyboardEvent）{
oEvent.initKeyboardEvent（keydown，true，true，document.defaultView，false，false，false，false，k，k）;
} else {
oEvent.initKeyEvent（keydown，true，true，document.defaultView，false，false，false，false，k，0）;
}
oEvent.keyCodeVal = k;
if（oEvent.keyCode！== k）{
alert（keyCode mismatch+ oEvent.keyCode +（+ oEvent.which +））;
}
document.dispatchEvent（oEvent）;
}
Podium.keydown（83）;
}，5000）;
只需将此代码放置在您的Chrome浏览器控制台（适用于web.whatsapp.com）中，然后按Enter即可。然后立即点击你的网页的任何部分（转移焦点）。 5秒后，您会在该文本字段上看到光标。但是关键事件并没有被调用。
当我正在用javascript处理web.whatsapp.com时，可以看看我创建的这个函数来在搜索输入中输入一些文本：
function searchContact（text）
{
var input = document.getElementsByClassName（input input-search）[0];
input.value =;
var evt = document.createEvent（TextEvent）;
evt.initTextEvent（textInput，true，true，window，text，0，en-US）;
input.focus（）;
input.dispatchEvent（evt）;
}
input 是输入元素。 evt 是输入事件。 文本是您要搜索的文本。
此功能执行以下操作：
获得输入 - >清除它 - >创建键盘输入事件 - >集中输入 - >在输入中应用事件
编辑：由于对此答案的反驳，Whatsapp Web已更新，因此此解决方案在Whatsapp Web中不再有效。（可能对其他地方或项目有用）
I am trying to simulate keydown event in Google chrome console. The site of my interest is web.whatsapp.com and the element of concern is document.getElementsByClassName("input-search")[0];
What I am trying to do is that as one types some text in that field, the contact list shown below that field gets updated with contacts containing the content in that text field.
Before trying anything else, I just set focus to this text field using this answer.
Things I tried are:
https://stackoverflow.com/a/12187302/1291122 - Nothing happens and no element is updated in the contact list shown.
https://stackoverflow.com/a/4176116/1291122 - Again, the same result.
https://stackoverflow.com/a/10520017/1291122 - Nothing happens. Same result
There were a few other sources as well. But nothing has worked. How do I simulate the exact effect (of typing some text in the text field and seeing the contact list update) using JavaScript the console?
My chrome version is the latest one as of the date of writing the answer- 41.0.2272.101 EDIT:
Here is one of the sample codes which I have tried. (From answer 3 above)
setTimeout(function () {
$(".input-search").focus();
Podium = {};
Podium.keydown = function(k) {
var oEvent = document.createEvent('KeyboardEvent');
// Chromium Hack
Object.defineProperty(oEvent, 'keyCode', {
get : function() {
return this.keyCodeVal;
}
});
Object.defineProperty(oEvent, 'which', {
get : function() {
return this.keyCodeVal;
}
});
if (oEvent.initKeyboardEvent) {
oEvent.initKeyboardEvent("keydown", true, true, document.defaultView, false, false, false, false, k, k);
} else {
oEvent.initKeyEvent("keydown", true, true, document.defaultView, false, false, false, false, k, 0);
}
oEvent.keyCodeVal = k;
if (oEvent.keyCode !== k) {
alert("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ")");
}
document.dispatchEvent(oEvent);
}
Podium.keydown(83);
}, 5000);
Simply put this code in your chrome browser console(for web.whatsapp.com) and hit enter. Then immediately click on any part of your webpage(to transfer focus). After 5 seconds you would see the cursor on that text field. But key down event does not get invoked.
As I'm working on manipulating web.whatsapp.com with javascript, you can take a look at this function I created to type some text in the search input:
function searchContact(text)
{
var input = document.getElementsByClassName("input input-search")[0];
input.value = "";
var evt = document.createEvent("TextEvent");
evt.initTextEvent ("textInput", true, true, window, text, 0, "en-US");
input.focus();
input.dispatchEvent(evt);
}
input is the input element. evt is the typing event. text is the text you want to search.
This function does the following:
get the input -> clear it -> create a keyboard typing event -> focus the input -> apply the event on the input
EDIT: Since the wrriting of this answer, Whatsapp Web was updated and so this solution does not work anymore in Whatsapp Web. (might be useful for other places or projects)
这篇关于在Chrome中模拟keydown事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
