1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > javascript 模拟按键事件 触发输入框oninput事件

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

时间:2019-12-17 21:28:49

相关推荐

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。