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

66 次访问 2022-10-11

小老虎

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

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

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

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

最后通过事件监听器，从textarea的事件往上级一个个删。
终于！！删到input的时候，手动输入的时候字数不再变化了！

接下来就是用触发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");

来源引用