Chrome 模拟键盘输入/将字符串插入文本区域(adwords)

bqf10yzr 于 2023-02-14 发布在 Go

关注(0)|答案(3)|浏览(381)

我正在尝试使用CefSharp（版本43）从https://adwords.google.com/ko/KeywordPlanner/Home中抓取关键字
我可以通过编程方式登录到adwords门户网站。
然而，每当我试图通过将element.value、element.innerText和element.innerHtml分配给所需的字符串来将一些文本（搜索关键字）插入到特定的textarea（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");

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

google-chrome

来源：https://stackoverflow.com/questions/33063418/simulate-keyboard-input-insert-string-into-textarea-adwords

3条答案

按热度按时间

xmd2e60i1#

好吧，我找到解决办法了：

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");

赞(0）回复(0）举报 2023-02-14

jtoj6r0c2#

@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);
}

赞(0）回复(0）举报 2023-02-14

yhqotfr83#

贷方应记入@kentcdodds。
您需要改用文本区域的valueSetter。

const textarea = document.getElementsByTagName('textarea')[0]
    function setNativeValue(element, value) {
      const { set: valueSetter } = Object.getOwnPropertyDescriptor(element, 'value') || {}
      const prototype = Object.getPrototypeOf(element)
      const { set: prototypeValueSetter } = Object.getOwnPropertyDescriptor(prototype, 'value') || {}

      if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
        prototypeValueSetter.call(element, value)
      } else if (valueSetter) {
        valueSetter.call(element, value)
      } else {
        throw new Error('The given element does not have a value setter')
      }
    }
    setNativeValue(textarea, 'some text')
    textarea.dispatchEvent(new Event('input', { bubbles: true }))

setNativeValue函数用于设置一个DOM元素的值，比如一个文本区域。它通过使用该元素或其原型的“value”属性setter来实现。如果没有找到setter，则会抛出一个错误。

赞(0）回复(0）举报 2023-02-14

我来回答

Chrome 模拟键盘输入/将字符串插入文本区域(adwords)

3条答案

相关问题

热门标签

最新问答