使用 javascript 对输入字段执行搜索答案

【问题标题】：Execute a search on an input field using javascript使用 javascript 对输入字段执行搜索
【发布时间】：2014-11-07 02:39:41
【问题描述】：

我正在尝试编写一个健全性测试。给定：

<div id="txt-search-wrapper" class="pull-left non-action">
    <span class="search-widget"></span>
    <input type="text" class="search-widget" id="txt-search" placeholder="Search">
</div>

如果我在控制台中使用其中任何一个，文本将被输入到搜索框中。如果我在 ui 中手动单击输入，搜索将正确执行。

document.getElementById('txt-search').value='test'
$('#txt-search').val('test')

但是，以下命令将无法单击并执行搜索。我试图将 \r\n 附加到文本中，但无济于事。我也玩过按键事件。

document.getElementById('txt-search').click()
 $('#txt-search').click()

【问题讨论】：

查看以下答案：stackoverflow.com/questions/1225798/…stackoverflow.com/questions/2379949/…

标签： javascript jquery html automated-tests

【解决方案1】：

如果我误解了您的问题，请原谅，但看起来有两个独立但相关的问题在起作用。

首先，.click()

您的 jQuery 是有效的，但如果您想要实际发生某些事情，则 click() 需要一个处理程序。

$( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});

[来源：http://api.jquery.com/click/]

二、HTML表单

输入元素实际上没有执行搜索的能力。为此，您需要构建一个带有提交按钮的表单。

在此处查看 MDN 的优秀文档：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms

举个简单的例子，如下所示：

<!-- A common form that includes input tags -->
<form action="getform.php" method="get">
    First name: <input type="text" name="first_name" /><br />
     Last name: <input type="text" name="last_name" /><br />
        E-mail: <input type="email" name="user_email" /><br />
<input type="submit" value="Submit" />
</form>

来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

然后你可以调用点击提交输入来运行你的搜索。

希望对您有所帮助。

【讨论】：