Pitfalls of Simulating Keyboard Input with JS

Pitfalls

At first I searched around on Google and found a jQuery solution. The amount of code was small, it looked great and promising, but it didn't work at all……

I tried these versions over and over:

var e = $.Event('keyup')
e.keyCode = 49
$('#btn').trigger(e)

// 就是把 keycode 换成 which
$('#btn').trigger($.Event('keyup', { which: 49 }))

Didn't work at all……

Then I looked at the event listener in the developer debugging tools and found that the input box was listening for the input event. So I tried setting the input's value first, then using jQuery to simulate triggering the event to see if it would work~

$('#btn').trigger('input')

That didn't work either

Solution

Then I found a pretty good method: using native JS InputEvent. For older Chrome, use UIEvent instead; the effect is basically the same.

The code is as follows

Using InputEvent:

var dom = document.querySelector('#selector')
var evt = new InputEvent('input', {
    inputType: 'insertText',
    data: st,
    dataTransfer: null,
    isComposing: false
});
dom.value = '输入的内容';
dom.dispatchEvent(evt);

Using UIEvent:

var dom = document.querySelector('#selector')
var evt = new UIEvent('input', {
    bubbles: false,
    cancelable: false
});
dom.value = st;
dom.dispatchEvent(evt);

Personally tested, it works perfectly

You can wrap it into a function yourself for more convenient calling; I won't paste that part of the code~

References

• Useful reference: http://fengyitong.name/index.php/archives/38/
• Simulating keyboard input with js+JQuery: https://blog.csdn.net/qq_45741976/article/details/102645358
• A simple website for getting keycodes: https://keycode.info/

Welcome to Discuss

Programming Lab focuses on exploring popular new internet technologies and team agile development practices. Reply with linux, flutter, c#, netcore, android, kotlin, java, python, etc. in the backend of the WeChat official account "Programming Lab" to get related technical articles and materials. If you have any questions, you can also leave a message in the official account backend~

• Cnblogs: https://www.cnblogs.com/deali/
• Coding livestream: https://live.bilibili.com/11883038
• Zhihu: https://www.zhihu.com/people/dealiaxy