记录下解决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");