JS_使用脚本填充基于Vue的用户名密码输入框并触发登录

梁山好汉（Ls_man）2026-01-15 12:48

如图所示有一个Web登录页面，如何使用Javascript脚本填充用户名密码并登录呢？

我们先使用F12分析HTML代码：

html 复制代码

<!--输入框1-->
<input type="text" autocomplete="off" placeholder="请输入用户名" class="el-input__inner">

<!--输入框2-->
<input type="password" autocomplete="off" placeholder="请输入密码" class="el-input__inner">

<!--按钮1-->
<button type="button" class="el-button login_button el-button--default el-button--login">
    <span>登 录</span>
</button>

其中有两个输入框和一个按钮，编写Javascript脚本：

javascript 复制代码

setTimeout(function(){

    //赋值+触发

    //用户名
    document.getElementsByTagName('input')[0].value='YOUR_ACCOUNT';
    document.getElementsByTagName('input')[0].dispatchEvent(new Event('input', { bubbles: true }));

    //密码
    document.getElementsByTagName('input')[1].value='YOUR_PASSWORD';
    document.getElementsByTagName('input')[1].dispatchEvent(new Event('input', { bubbles: true }));

    //模拟点击登录按钮
    document.getElementsByTagName('button')[0].click();

},1000*1);//延迟执行1秒（根据需要修改）

由于Element UI 的输入框是基于 Vue 响应式实现的，单纯改value不会更新组件的绑定数据，调用dispatchEvent触发input事件能模拟用户手动输入的行为，让组件同步更新。