前端坑多：使用js模拟按键输入的踩坑记录
前端坑多：使用js模拟按键输入的踩坑记录
坑
一开始在Google搜索了一番，找到了用jQuery的方案，代码量很少，看起来很美好很不错，结果，根本没用……
我反复试了这几个版本：
var e = $.Event('keyup')
e.keyCode = 49
$('#btn').trigger(e)
// 就是把 keycode 换成 which
$('#btn').trigger($.Event('keyup', { which: 49 }))
一点用都没有……
然后又通过开发者调试工具看 event listener，发现输入框监听了input事件，我就试试先设置input的value，然后jQuery模拟触发事件能不能~
$('#btn').trigger('input')
结果也不行
解决
然后找到一个比较好的方法，使用js原生的InputEvent，如果是比较旧的Chrome，就用UIEvent代替，效果基本一样。
代码如下
使用InputEvent：
var dom = document.querySelector('#selector')
var evt = new InputEvent('input', {
inputType: 'insertText',
data: st,
dataTransfer: null,
isComposing: false
});
dom.value = '输入的内容';
dom.dispatchEvent(evt);
使用UIEvent：
var dom = document.querySelector('#selector')
var evt = new UIEvent('input', {
bubbles: false,
cancelable: false
});
dom.value = st;
dom.dispatchEvent(evt);
亲测可以完美实现
可以自己封装成函数比较方便调用，这部分代码就不贴了~
参考资料
js+JQuery模拟键盘输入：https://blog.csdn.net/qq_45741976/article/details/102645358
简单获取keycode的网站：https://keycode.info/