• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

前端坑多:使用js模拟按键输入的踩坑记录

JAVA相关 曦远 1326次浏览 0个评论

一开始在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);

亲测可以完美实现

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

参考资料

  • 有用的参考资料:http://fengyitong.name/index.php/archives/38/
  • js+JQuery模拟键盘输入:https://blog.csdn.net/qq_45741976/article/details/102645358
  • 简单获取keycode的网站:https://keycode.info/

欢迎交流

程序设计实验室专注于互联网热门新技术探索与团队敏捷开发实践,在公众号「程序设计实验室」后台回复 linux、flutter、c#、netcore、android、kotlin、java、python 等可获取相关技术文章和资料,同时有任何问题都可以在公众号后台留言~

  • 博客园:https://www.cnblogs.com/deali/
  • 打代码直播间:https://live.bilibili.com/11883038
  • 知乎:https://www.zhihu.com/people/dealiaxy


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明前端坑多:使用js模拟按键输入的踩坑记录
喜欢 (0)

您必须 登录 才能发表评论!

加载中……