JavaScript：将关键事件模拟到文本框/输入中

尽管有很多关于如何在JS中模拟按键（keydown/keypress）的文章，但似乎没有一个解决方案能够与我使用的浏览器（Firefox ESR 17.0.7、Chrome 28.0.1500.72、IE 10）协同工作。我测试的解决方案来自，和

我试图做的是模拟文本区域/输入中的任何按键。虽然我可以直接更改“值”来添加/删除字符，但我没有看到任何选项，只能对“向上”、“向下”、“主页”等键进行模拟输入

根据这项研究，它应该是简单的。例如：

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事件，我的处理程序可以捕获它。但是，它不会以任何方式影响文本区域-不会出现新行。其他键代码也一样：字符不会出现，箭头不会更改插入符号的位置，等等

我已经将代码扩展并发布到，因此任何人都可以使用代码。在我的浏览器中，没有任何按钮在任何情况下对文本区域产生任何影响

---

我非常感谢在这个问题上的任何帮助。

我非常确定这是一个“安全”问题，因为我以前在尝试模拟按键时遇到过同样的问题

问：那我怎么能按程序打字呢？
答：获取/设置selectionStart、selectionEnd等，并结合使用

slice

等字符串方法插入字符。（见参考资料）

问：那你为什么还要使用这种活动呢？
答：所有的事件监听器都会像一个真正的关键事件一样工作

---

因此，可以减少箭头/起始/结束的功能

问：哪里出了问题？

---

答：如果行足够长，可以进行包装，则会将其视为未包装。

可以通过Selenium将键发送到浏览器：

它为每个可以编程的浏览器提供驱动程序。它通常从打开URL开始，然后脚本将充当浏览器的远程控制。因此，允许您发送实际的关键点，而不是模拟它们，这在浏览器中无法通过编程实现

---

例如，您可以使用

来实现这一点。好的，我也有同样的感觉，出于安全原因，可以故意这样做。从Q/A开始：编辑文本不是问题，问题是模拟“向上”、“向下”、“主页”等…如果您将textarea/input重新创建为块节点，其中包含每个字符的内联节点，并具有匹配的环绕、大小和样式，则可能实现这些功能，然后计算所有不同的矩形，找到你想要结束的地方。我无法想象它很容易实现。。。也许更干净的方法是使用单空格字体，计算出上一行字符的位置，然后只计算字符数。谢谢。然而，我在第三个页面上模拟输入，比如google.com。我的虚拟键盘是作为Chrome扩展实现的，必须能够允许用户仅使用此键盘在任何页面上键入和修改表单中的文本。如果必须放弃某些功能，那将是一个巨大的失望。谢谢你的解决方案，@Paul S，我也在考虑同样的问题，但你让我的任务变得更容易了。下一步，我将尝试更新您的解决方案，使其即使换行也能正常工作，但有一点希望。解决方案很棒，但我可以模拟键入吗？你能举个例子，比如在文本框中输入“abc”吗？非常感谢

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