记录下解决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获取输入框DomchangeReactInputValue(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");```