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

 

copy

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

亲测可以完美实现

可以自己封装成函数比较方便调用,这部分代码就不贴了~

 

 

 

 

 

 

 

 

 

 

 

机械手表摆轮的作用 机械手表一般动力储存多少 手表对哪些东西有磁场
上一篇:基于jssip的简单封装


下一篇:JS获取事件冒泡路径(composedPath )的兼容性写法