相关文章推荐
安静的柚子  ·  c++ ...·  2 周前    · 
慷慨大方的泡面  ·  Mysql ...·  1 年前    · 
开心的足球  ·  pandas DataFrame ...·  1 年前    · 
胆小的咖啡  ·  iOS ...·  1 年前    · 

前端坑多:使用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', {