由于页面上加载了对应的JavaScript代码,监听着input框,包括但不限于:修改、删除、失去焦点等等,导致通过控制台修改input框的值,无法被原页面所监听,最终无法通过表单验证实现想要的效果,所以需要通过手动添加对应的事件来实现效果
var invent = new InputEvent(type,eventInitDict)
- type: 事件类型,必需。可以是 'input'、'change' 等合法的事件类型。
- eventInitDict: 一个可选的参数对象,用于设置事件的属性。
- bubbles: 布尔值,表示事件是否可以冒泡,默认为 false。如果设置为 true,则事件会向上传递到父元素。
- cancelable: 布尔值,表示事件是否可以被取消,默认为 false。如果设置为 true,则可以通过调用 event.preventDefault() 来取消事件的默认行为。
- composed: 布尔值,表示事件是否可以穿越 Shadow DOM 边界,默认为 false。如果设置为 true,则事件可以从 Shadow DOM 中的元素传递到外部文档。
- data: 字符串,表示输入的数据。可以是用户输入的文本或其他类型的数据。
- inputType: 字符串,表示输入的类型,比如 'insertText'、'deleteContentBackward' 等。用于指示输入的操作类型。
- isComposing: 布尔值,表示是否正在进行输入组合,默认为 false。如果设置为 true,则表示用户正在进行输入组合,例如输入中文时的拼音输入。
- targetRanges: 一个 Range 对象数组,表示输入的目标范围。用于指定输入操作的目标文本范围
常用的事件类型
- click:当用户点击元素时触发。常用于处理点击事件的逻辑。
- mouseout:当鼠标指针移出元素时触发。常用于处理鼠标离开事件的逻辑。
- keydown:当用户按下键盘上的任意键时触发。常用于处理键盘按键事件的逻辑。
- keyup:当用户释放键盘上的任意键时触发。常用于处理键盘释放事件的逻辑。
- input:当元素的值发生变化时触发。常用于处理输入框内容变化事件的逻辑。
- change:当元素的值发生变化并且失去焦点时触发。常用于处理表单元素值变化事件的逻辑。
- focus:当元素获得焦点时触发。常用于处理元素获得焦点事件的逻辑。
- blur:当元素失去焦点时触发。常用于处理元素失去焦点事件的逻辑。
常见用法
var data_id = "bd3da87c"
var inputEvent = new Event('input', { bubbles: true });
var input = document.querySelector(`input[data-v-${data_id}=""]`);
input.dispatchEvent(inputEvent);
对于textarea 可能上面的方法不适合用,需要用下面的方法
event.initEvent('input', false, true); 初始化了事件对象,设置了以下参数:
- 'input':事件类型,表示要创建的事件类型为 'input'。可以是任何合法的事件类型,比如 'click'、'keydown' 等。
- false:表示事件是否可以冒泡,默认为 false。如果设置为 true,则事件可以冒泡到父元素。
- true:表示事件是否可以被取消,默认为 true。如果设置为 false,则无法通过调用 event.preventDefault() 来取消事件的默认行为。
const event = document.createEvent('HTMLEvents');
event.initEvent('input', false, true);
var textarea = document.querySelector(`textarea[data-v-${data_id}=""]`);
textarea.dispatchEvent(event);