javascript - 使用js设置输入元素值时如何触发更改事件
问题描述
我想写一个可以自动填充密码的chrome扩展。代码如下:
//get the account
document.querySelector("input[type=text]").addEventListener('input', () => {
fillPassword();
})
function fillPassword() {
let password = '';
// some operation to get password
document.querySelector("input[type=password]").value = password
}
一切正常,密码已获得并正确“设置”,期待登录。当我单击登录按钮时,它会通知我“密码不能为空”。所以这是我的想法。
因为网站是vue写的,没有触发change事件,登录表单中也没有设置密码。所以我现在的问题是如何触发 input 的 change 事件,让它的值可以正确的被 vue 捕获。
我试图验证我的想法,所以我在密码输入中添加了一个监听器。
//get the account
document.querySelector("input[type=text]").addEventListener('input', () => {
fillPassword();
})
document.querySelector("input[type=password]").addEventListener('change', () => {
console.log('changed')
})
function fillPassword() {
let password = '';
// some operation to get password
document.querySelector("input[type=password]").value = password
}
并且没有预期的打印。然后我尝试触发更改事件,但似乎没有用。
const e = new Event("change");
const element = document.querySelector("input[type=password]")
element.value = password;
element.dispatchEvent(e);
解决方案
哦,我修好了。确实触发了更改事件,但 v-model 监听输入是input
事件。所以我将change
event 更改为input
,然后它运行良好。
推荐阅读
- c++ - 在 libtorch 中使用 forward 的非法指令(核心转储)
- angular - IONIC 4 离子菜单未显示在离子菜单按钮单击上
- java - 部署 jar 文件时出现问题:错误依赖项
- java - Azure Functions with java - 如何获取函数中写入的日志?
- phaser-framework - 无法向场景添加补间
- docker - 在 TensorFlow 基础映像(1.13.2-gpu-py3)上安装 pip 包不起作用
- sql - 将 varchar 数据类型转换为日期时间错误。日期格式问题
- python - 如何从 gRPC 客户端获取状态代码 OK 响应
- android - 如何修复“Http2CallStream 缺少或权限不足”
- php - 在 ubuntu 18.10.1 中安装 wordpress 后出错