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获取输入框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");```

javascript 模拟按键事件触发输入框oninput事件相关推荐

JavaScript实现按键快速获取输入框光标
JavaScript实现按键快速获取输入框光标案例池子: JS实现鼠标悬停变色 JavaScript中的排他算法实现按钮单选 JavaScript中的localStorage JavaScript中 ...
Winform3、事件触发机制学习:事件的注册和定义和参数含义
Winform3.事件触发机制学习:事件的注册和定义在一个Form窗体中拖个按钮,双击后系统自动生成代码: // 定义事件,一般在Form.cs文件 // 默认事件是有命名规范的,控件命_事件名_个 ...
JavaScript之事件触发on和事件监听addEvent及addEventListener的区别和作用
一.on事件为dom节点添加多个on事件只会执行最后的那个事件,因为最后的指定的on事件指向最后的那个函数,代码如下所示: function method1(){console.log('我是方法1 ...
html模拟点击某个键盘按钮,如何使用JavaScript模拟按键或单击？
模拟鼠标单击我的猜测是网页正在监听mousedown而不是点击(这对于可访问性是不利的,因为当用户使用键盘时,只会触发焦点和点击,而不是mousedown).所以你应该模拟mousedown,cli ...
全选或双击触发了键盘keydown事件（鼠标事件触发c快捷键事件）
程序员的日常玄学记录遇到一个情况,在监听键盘事件的时候,单击某个地方,然后点delete能够成功监听delete键并且成功删除我想删除的东西. 但是当滑动鼠标,全选数据的时候,delete键盘事件就 ...
工作手记之移动端中文输入法触发oninput事件的解决方法
事件背景工作过程中涉及到了移动端输入内容长度的限定,这就要求需要对输入过程中内容的变化进行监控和判定,以决定是否可以继续输入,所以就想着是否可以在相关输入处监听oninput事件?但是在手机端,中文 ...
第二十八课：focusin与focusout,submit,oninput事件的修复
focusin与focusout 这两个事件是IE的私有实现,能冒泡,它代表获得焦点或失去焦点的事件.现在只有Firefox不支持focusin,focusout事件.其实另外两个事件focus和bl ...
说说 input 输入框的事件
1.从input框获取焦点到,输入值,失去焦点这个过程所有事件,以及一些特点: 过程:onfocus -> 键盘输入 -> onkeydown -> onkeypress -> ...
input元素的oninput事件和onchange事件
input元素的oninput事件和onchange事件框架用多了,感觉原生的有点弱化了,不说了,是时候巩固一波了 ^ _ ^ 1.input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加 ...

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

方法1：

方法二(直接触发input事件）：

javascript 模拟按键事件触发输入框oninput事件相关推荐

最新文章

热门文章

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

方法1：

方法二(直接触发input事件）：

javascript 模拟按键事件 触发输入框oninput事件相关推荐

最新文章

热门文章

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

javascript 模拟按键事件触发输入框oninput事件相关推荐