使用Javascript正确设置文本框的输入值

时间:2018-06-24 10:14:02

标签: javascript jquery

我有一个网站,带有一个用户名文本框和一个密码文本框以及一个用于登录的登录按钮。在该网站上,如果我通过手动输入用户名和密码登录,则可以正常工作。但是当我使用这样的JS

document.getElementById('userId').value = 'name';
document.getElementById('pwd').value = 'password';

然后单击登录按钮,它显示错误“请输入用于登录的用户名和密码”,即未获取值。

我也尝试过像这样发送事件,但是没有运气

var username = document.getElementById('userId');
username.value = 'name';

if ('createEvent' in document) {
  var evt = document.createEvent("HTMLEvents");
  evt.initEvent('change', false, true);
  username.dispatchEvent(evt);
} else {
  username.fireEvent('onchange');
}

var password = document.getElementById('pwd');
password.value = 'password';

if ('createEvent' in document) {
  var evt = document.createEvent("HTMLEvents");
  evt.initEvent('change', false, true);
  password.dispatchEvent(evt);
} else {
  password.fireEvent('onchange');
}

因此,这里我要向专家提出的唯一问题是我应该编写什么Javascript / JQuery代码,这将为手动更改文本框值的逻辑构想。

1 个答案:

答案 0 :(得分:1)

经过一番研究,我只需要很小的改动就可以完成工作。除了触发onchange事件外,我还必须触发oninput事件。我在事件侦听器选项卡中看到了Chrome开发人员工具发现的问题,表明没有“更改”事件与文本框相关联。相反,它具有“输入”事件。因此,以下代码对其进行了修复:)

var username = document.getElementById('userId');
username.value = 'name';

if ('createEvent' in document) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent('input', false, true);
username.dispatchEvent(evt);
}
else {
username.fireEvent('oninput');
}

var password = document.getElementById('pwd');
password.value = 'password';

if ('createEvent' in document) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent('input', false, true);
password.dispatchEvent(evt);
}
else {
password.fireEvent('oninput');
}
相关问题