如何在javascript中合成按键

Question

我想在文本框中为一些输入过滤代码编写一些测试.对于大多数测试,我可以调用setValue并触发更改事件,这很容易做到.但是,在这种情况下,因为我想测试输入被过滤掉(或不过滤),我不能setValue()直接.

我尝试调度keydown,keyup,keypress,textinput事件.我可以看到它们的处理程序被调用,但文本实际上没有显示在文本框中注意,这只在Firefox中"有用",我理解代码对于其他浏览器看起来会有所不同.

function dispatch(target, eventType, charCode) {
   var evt = document.createEvent("KeyboardEvent");
   evt.initKeyEvent(
     eventType,
     true,
     true,
     window,
     false,
     false,
     false,
     false,
     charCode,
     0
   );
   target.dispatchEvent(evt);
}


var id = document.getElementById('id');
id.onkeydown = id.onkeyup = id.onkeypress = function() {console.log(arguments)}

dispatch(id, 'keydown', 65);
dispatch(id, 'keyup', 65);
dispatch(id, 'keypress', 65);
dispatch(id, 'textinput', 65);
// I can see the handlers were called but it doesn't display in the text box

我知道这有限制,因为我们不希望网络应用程序只是假装他们正在为用户行事.但是,这是为了测试我自己的应用程序,我可以使用特定的配置文件启动firefox并安装插件,如果我知道它会有所帮助,甚至可以自己编写.

我所追求的是避免使用Selenium,我想让Java远离我的JS测试,因为它不仅速度慢,而且还必须重新实现Java中的大量DOM查询.

毕竟,问题是,是否有人知道如何让代码实际修改输入？调整设置,安装插件？

没有回答我的问题的问题列表

• 模拟TDD JavaScript的用户输入
• 使用jQuery触发按键事件的明确方法
• 如何使用Javascript将密钥发送到输入文本字段？
• 是否可以通过编程方式模拟按键事件？

Answer 1

我刚刚发现以下代码至少可以在 Chrome 中运行。无法使用 Firefox 或 IE http://jsfiddle.net/D2s5T/14/

function dispatch(target, eventType, char) {
   var evt = document.createEvent("TextEvent");    
   evt.initTextEvent (eventType, true, true, window, char, 0, "en-US");
   target.focus();
   target.dispatchEvent(evt);
}
dispatch(el, "textInput", "a");