是否可以在JavaScript中以编程方式模拟按键事件?
当前回答
让它工作的关键部分是认识到charCode, keyCode和这些都是不推荐的方法。因此,如果处理按键事件的代码使用这三个中的任何一个,那么它将收到一个伪答案(例如,默认值为0)。
只要使用非弃用的方法(如key)访问按键事件,就应该没问题。
为了完成,我添加了触发事件的基本Javascript代码:
const rightArrowKey = 39 const event = new KeyboardEvent('keydown',{'key':rightArrowKey}) document.dispatchEvent(事件)
其他回答
您可以创建和分派键盘事件,它们将触发相应的已注册事件处理程序,但是,如果分派到input元素,则不会产生任何文本。
要完全模拟文本输入,您需要生成一系列键盘事件,并显式地设置input元素的文本。事件的顺序取决于模拟文本输入的彻底程度。
最简单的形式是:
$('input').val('123');
$('input').change();
你可以用下面的代码模拟输入密码:
铬测试100%工作
DoCustomEvent('password', '#loginpin');
function DoCustomEvent(ct, elem){
var key;
var pressEvent = document.createEvent("CustomEvent");
pressEvent.initCustomEvent("keypress", true, false);
for (var i =0; i < ct.length; ++i)
{
key = ct.charCodeAt(i);
pressEvent.bubbles = true;
pressEvent.cancelBubble = false;
pressEvent.returnValue = true;
pressEvent.key = ct.charAt(i);
pressEvent.keyCode = key;
pressEvent.which = key;
pressEvent.charCode = key;
pressEvent.shiftKey = false;
pressEvent.ctrlKey = false;
pressEvent.metaKey = false;
document.querySelector(elem).focus();
//keypress //beforeinput //input //sendkeys //select
setTimeout(function() {
var e = new window.KeyboardEvent('keypress', pressEvent);
document.activeElement.dispatchEvent(e);
e = new window.KeyboardEvent('input', pressEvent);
document.activeElement.dispatchEvent(e);
}, 0);
document.querySelector(elem).value = document.querySelector(elem).value + ct.charAt(i);
}
如果你可以使用jQuery 1.3.1:
函数simulateKeyPress(字符){ jQuery.event.trigger ({ 类型:键盘按键, 其中:character.charCodeAt (0) }); } $(函数(){ 美元(的身体).keypress(函数(e) { 警报(e.which); }); simulateKeyPress(“e”); }); < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js " > > < /脚本
我想模拟按Tab键……扩展Trevor的回答,我们可以看到像“tab”这样的特殊键确实会被按下,但我们看不到按“tab”会产生的实际结果……
尝试与调度这些事件的'activeElement'以及全局文档对象都-代码添加下面;
代码片段如下:
var element = document.getElementById("firstInput"); document.addEventListener("keydown", function(event) { console.log('we got key:', event.key, ' keyCode:', event.keyCode, ' charCode:', event.charCode); /* enter is pressed */ if (event.keyCode == 13) { console.log('enter pressed:', event); theKey = 'Tab'; attributes = { bubbles: true, key: theKey, keyCode: 9, charCode: 0, }; setTimeout(function() { /* event.keyCode = 13; event.target.value += 'b'; */ var e = new window.KeyboardEvent('focus', attributes); document.activeElement.dispatchEvent(e); e = new window.KeyboardEvent('keydown', attributes); document.activeElement.dispatchEvent(e); e = new window.KeyboardEvent('beforeinput', attributes); document.activeElement.dispatchEvent(e); e = new window.KeyboardEvent('keypress', attributes); document.activeElement.dispatchEvent(e); e = new window.KeyboardEvent('input', attributes); document.activeElement.dispatchEvent(e); e = new window.KeyboardEvent('change', attributes); document.activeElement.dispatchEvent(e); e = new window.KeyboardEvent('keyup', attributes); document.activeElement.dispatchEvent(e); }, 4); setTimeout(function() { var e = new window.KeyboardEvent('focus', attributes); document.dispatchEvent(e); e = new window.KeyboardEvent('keydown', attributes); document.dispatchEvent(e); e = new window.KeyboardEvent('beforeinput', attributes); document.dispatchEvent(e); e = new window.KeyboardEvent('keypress', attributes); document.dispatchEvent(e); e = new window.KeyboardEvent('input', attributes); document.dispatchEvent(e); e = new window.KeyboardEvent('change', attributes); document.dispatchEvent(e); e = new window.KeyboardEvent('keyup', attributes); document.dispatchEvent(e); }, 100); } else if (event.keyCode != 0) { console.log('we got a non-enter press...: :', event.key, ' keyCode:', event.keyCode, ' charCode:', event.charCode); } }); <h2>convert each enter to a tab in JavaScript... check console for output</h2> <h3>we dispatchEvents on the activeElement... and the global element as well</h3> <input type='text' id='firstInput' /> <input type='text' id='secondInput' /> <button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display Date and Time.</button> <p id="demo"></p>
这是我找到的:
函数createKeyboardEvent(名称,键,altKey, ctrlKey, shiftKey, metaKey,气泡){ var e = new事件(name) E.key = key e.keyCode = e.key.charCodeAt(0) e.which = e.keyCode e.altKey = altKey e.ctrlKey = ctrlKey e.shiftKey = shiftKey e.metaKey = metaKey e.泡泡=泡泡 返回e } Var name = 'keydown' Var键= 'a' var event = createKeyboardEvent(name, key, false, false, false, false, true) 文档。addEventListener(name, () => {}) document.dispatchEvent(事件)