前端坑多：使用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);

亲测可以完美实现

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

 

 

 

 

 

 

 

 

 

 

 

机械手表摆轮的作用 机械手表一般动力储存多少 手表对哪些东西有磁场

标签：dom,坑多,UIEvent,js,按键,var,input,btn,evt
来源： https://blog.csdn.net/tuoyi123/article/details/114702203