JavaScript：將關鍵事件模擬​​到文本框/輸入中

Question

盡管有很多關於如何在JS中模擬按鍵（keydown / keypress）的文章，但是沒有一個解決方案似乎與我正在使用的瀏覽器一起工作（Firefox ESR 17.0.7，Chrome 28.0.1500.72，IE 10）。 我測試的解決方案來自這里 ， 這里和這里 。

我要做的是模擬textarea / input中的任何鍵擊。 雖然我可以追加/刪除直接更改“值”的字符，但我看不到選項，只能輸入“Up”，“Down”，“Home”等鍵的模擬。

根據文檔 ，它應該很簡單。 例如：

var e = 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, 13, 0);
}
document.getElementById("text").dispatchEvent(e);

確實觸發了“Enter”keydown事件，我的處理程序可以捕獲它。 但是，它不會以任何方式影響textarea - 不會出現新行。 其他鍵碼相同：不顯示字符，箭頭不改變插入符號的位置等。

我已經通過Orwellophile擴展了代碼並將其發布到http://jsfiddle.net/npF3d/4/ ，所以任何人都可以使用代碼。 在我的瀏覽器中，在任何情況下都沒有按鈕對textarea產生任何影響。

我將不勝感激這個問題的任何幫助。

Answer 1

我很確定這是一個“安全”的事情，因為我在嘗試模擬按鍵之前遇到了同樣的事情。

問：如何以編程方式輸入？
答：獲取/設置selectionStart ， selectionEnd等，以及將這些與String方法結合使用，如slice插入字符。 （參見HTMLTextAreaElement參考）

問：為什么你還會使用這種活動呢？
答：所有的事件監聽器都會像真正的關鍵事件一樣工作。

---

因此，可以實現箭頭/家庭/終端的減少的功能演示

function homeKey(elm) {
    elm.selectionEnd =
        elm.selectionStart =
            elm.value.lastIndexOf(
                '\n',
                elm.selectionEnd - 1
            ) + 1;
}

function endKey(elm) {
    var pos = elm.selectionEnd,
        i = elm.value.indexOf('\n', pos);
    if (i === -1) i = elm.value.length;
    elm.selectionStart = elm.selectionEnd = i;
}

function arrowLeft(elm) {
    elm.selectionStart = elm.selectionEnd -= 1;
}

function arrowRight(elm) {
    elm.selectionStart = elm.selectionEnd += 1;
}

function arrowDown(elm) {
    var pos = elm.selectionEnd,
        prevLine = elm.value.lastIndexOf('\n', pos),
        nextLine = elm.value.indexOf('\n', pos + 1);
    if (nextLine === -1) return;
    pos = pos - prevLine;
    elm.selectionStart = elm.selectionEnd = nextLine + pos;
}

function arrowUp(elm) {
    var pos = elm.selectionEnd,
        prevLine = elm.value.lastIndexOf('\n', pos),
        TwoBLine = elm.value.lastIndexOf('\n', prevLine - 1);
    if (prevLine === -1) return;
    pos = pos - prevLine;
    elm.selectionStart = elm.selectionEnd = TwoBLine + pos;
}

問：哪里出錯了？
答：如果線條足夠長以便包裹，它會將它們視為未包裝。

Answer 2

通過Selenium可以實現向瀏覽器發送密鑰： http ： //docs.seleniumhq.org/

它為每個可編程的瀏覽器提供驅動程序。 它通常從打開URL開始，然后您的腳本將充當瀏覽器的遠程控制。 因此，允許您發送實際密鑰而不是模擬它們，這在瀏覽器中以編程方式無法實現。

例如，您可以使用http://webdriver.io/來實現此目的