模拟键盘输入/将字符串插入文本区域（adwords）答案

【问题标题】：simulate keyboard input / insert string into textarea (adwords)模拟键盘输入/将字符串插入文本区域（adwords）
【发布时间】：2016-01-08 21:17:20
【问题描述】：

我正在尝试使用 CefSharp（版本 43）从 https://adwords.google.com/ko/KeywordPlanner/Home 中抓取关键字

我能够以编程方式登录 adwords 门户。

但是，每当我尝试通过将 element.value、element.innerText 和 element.innerHtml 分配给所需的字符串来将一些文本（搜索关键字）插入特定的文本区域 (id="gwt-debug-keywords-text-area") 时，但没有任何反应。

var txtElem = document.getElementById("gwt-debug-keywords-text-area");
txtElem.addEventListener("keydown", onKeyPress, false);

function onKeyPress(e) {
    alert(e.keyCode);
}

function triggerKeyboardEvent(el, keyCode) {
    var evt = document.createEventObject ?
        document.createEventObject() : document.createEvent("Events");

    if (evt.initEvent) {
        evt.initEvent("keydown", true, true);
    }

    evt.keyCode = keyCode;
    evt.which = keyCode;

    el.dispatchEvent ? el.dispatchEvent(evt) : el.fireEvent("onkeydown", evt);
}

triggerKeyboardEvent(txtElem, "s".charCodeAt(0));

在上面的代码中，出现了警告消息，但文本框仍然是空的。

显然，该文本区域上的按键向上/向下事件正在被谷歌自己的大量 JS 代码拦截。不幸的是，谷歌的源代码被高度混淆了，像我这样的 JS 菜鸟很难调试和遵循逻辑。

如何在文本区域中插入/模拟键盘输入？

我尝试过的其他一些代码（另见注释掉的部分）：

var txtElem = document.getElementById("gwt-debug-keywords-text-area");
txtElem.focus();

function simulateKeyEvent(character) {
    var e = new KeyboardEvent("keydown", { bubbles: true, cancelable: true, key: character.charCodeAt(0), char: character, shiftKey: false });
    //var e = new KeyboardEvent("keydown", { bubbles: true, cancelable: true, key: "a".charCodeAt(0), char: "a", shiftKey: true });
    return !document.getElementById("gwt-debug-keywords-text-area").dispatchEvent(e);

    var evt = document.createEvent("KeyboardEvent");
    /*
    if (e.initKeyboardEvent) {  // Chrome, IE
        e.initKeyboardEvent("keydown", true, true, document.defaultView, "Enter", 0, "", false, "");
    } else { // FF
        e.initKeyEvent("keydown", true, true, document.defaultView, false, false, false, false, character.charCodeAt(0), 0);
    }
    */
    //(evt.initKeyEvent || evt.initKeyboardEvent)('keypress', true, true, document.defaultView, 0, 0, 0, 0, 0, character.charCodeAt(0));
    evt.initKeyboardEvent("keypress", true, true, document.defaultView, 0, 0, 0, 0, 0, character.charCodeAt(0));
    return !document.getElementById("gwt-debug-keywords-text-area").dispatchEvent(evt);
}

simulateKeyEvent("s");

这些方法都不起作用....

【问题讨论】：

标签： javascript c# html google-chrome google-chrome-devtools

【解决方案1】：

好的，我找到了解决方案：

function setKeywordText(text) {
    var el = document.getElementById("gwt-debug-keywords-text-area");
    el.value = text;
    var evt = document.createEvent("Events");
    evt.initEvent("change", true, true);
    el.dispatchEvent(evt);
}

setKeywordText("test");

【讨论】：

这个可行，通知页面上的JS框架有关更改很有用

【解决方案2】：

@masroore 的代码运行良好，今天救了我。但后来我找到了this method is deprecated，并且正在被丢弃。

用new method 更新代码，做同样的事情：

function setKeywordText(text) 
{
    var el = document.getElementById("gwt-debug-keywords-text-area");
    el.value = text;
    var evt= new Event('change');
    el.dispatchEvent(evt);
}

【讨论】：