javascript 模拟按键事件 触发输入框oninput事件

Scroll Down

记录下解决textarea 在js赋值后不生效的问题

我要实现的是网页聊天框模拟输入一段话,然后js触发点击发送事件
然而在使用js直接赋值之后,textarea并没有收到值

document.querySelector('#id').value = 333;
image.png

又想到用按键事件触发onkeydown,onkeypress,onkeyup,然而试了半天并没有什么鸟用~

最后通过事件监听器,从textarea的事件往上级一个个删。
终于!!删到input的时候,手动输入的时候字数不再变化了!
image.png
接下来就是用触发input事件了
方法1:
这种适合被框架劫持setter事件,比如react vue

function changInputValue(inputDom,newText){
	let lastValue = inputDom.value;
	inputDom.value = newText;
	let event = new Event('input', { bubbles: true });
	event.simulated = true;
	let tracker = inputDom._valueTracker;
	if (tracker) {
  	tracker.setValue(lastValue);
	}
	inputDom.dispatchEvent(event);
}
 
//使用方法
var userIdDom = document.getElementById('userId');		//普通JS获取输入框Dom
changeReactInputValue(userIdDom,'username');			//改变React的输入框的值

方法二(直接触发input事件):

document.querySelector('#id').dispatchEvent(new Event('input'));

额外记录发送按键事件的时候找到的代码,最新可用

function fireKeyEvent(element, evtType, keyChar) {
		element.focus();
		var KeyboardEventInit = {key:keyChar, code:"", location:0, repeat:false, isComposing:false};
		var evtObj = new KeyboardEvent(evtType, KeyboardEventInit);
		element.dispatchEvent(evtObj);
	}
	
	var objInput = document.querySelector('#id');
	fireKeyEvent(objInput,"keydown","a11");

来源引用