在HTML DOM中使用javascript为web元素调用EventListener

在一个网页中，我有一个如下的输入框:

<input id="userId-inputEl" type="text" size="1" name="userId" placeholder="Enter Agent UserID..." style="width:100%;" class="x-form-field x-form-empty-field x-form-text" autocomplete="off" aria-invalid="false">

它看起来像[!][1]][1]作为页面加载时的默认值。

现在如果我想用

添加值

document.getElementById('userId-inputEl').value="test"

它把值写在那里，看起来像[![此处输入图像描述][2]][2]。在添加了这个值之后，如果我提交表单，它会说这个值是强制性的，这意味着它不接受这个值。

手动输入时，当我单击此框并键入值时，它被启用，看起来像这样[!][在这里输入图片描述][3]][3]，在提交表格后，该值被接受。

现在我试着使用

document.getElementById('userId-inputEl').click()

之前传递值，但它不起作用。在谷歌搜索后，我发现有一些eventlistener附加了这个元素。它们如下

[![4]][4]

我已经尝试使用dispatchEvent与组合来模糊，更改，焦点，输入，按下键，按下鼠标，选择开始和文本输入，但没有使用。

我是eventlistener概念的新手。如何实现使用javascript输入框中的值，就像手工完成一样?

在inspect窗口中打开eventlistener选项卡中的blur事件，如下图所示:

[![5]][5]

我不知道如何做到这一点。请帮助。[1]: https://i.stack.imgur.com/PVVuQ.png[2]: https://i.stack.imgur.com/z5ezn.png[3]: https://i.stack.imgur.com/TgD0X.png[4]: https://i.stack.imgur.com/lP5zV.png[5]: https://i.stack.imgur.com/LEzM1.png

你可以尝试使用jquery。您必须下载jquery或CND如果你下载jquery，那么:

<head>
<title> My website</title>
<script src="jquery-3.5.1.min.js"></script>
</head>

或如果你选择了jquery，那么

<head>
<title> My website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

下一步:

<body >
<form id="AgentForm" name="AgentForm" > 
<input id="userId-inputEl" type="text" size="1" name="userId" placeholder="Enter Agent UserID..." style="width:100%;" class="x-form-field x-form-empty-field x-form-text" autocomplete="off" aria-invalid="false">
<button type="submit" name="submit"> Submit</button>
</form>
</body>

$( document ).ready(function() {
$('#userId-inputEl').val("test") 
$('#AgentForm').on('submit', function(e){
e.preventDefault();
console.log($('#userId-inputEl').val());
});
});

相关内容

最新更新

热门标签：