输入触发按钮点击？答案

【问题标题】：enter to trigger button click?输入触发按钮点击？
【发布时间】：2017-06-20 05:17:13
【问题描述】：

我有一个这样的 html 表单：

<form name="f1">
<center>
<strong>Search VMs:</strong> 
<input id='vms' name="word" type="text"  size="50" placeholder="Name or IP, space delimited, partial name OK."  autofocus autocomplete="off" pattern=".{3,}" required title="3 chars minimum"  /> in
<select name="vc" id='whichvc'>
    <option value="all" selected="selected">all VCs</option>
</select>
<input type="checkbox" id="check4detail" name="detail">Include details
<input name='searchbutton' value="Search VMs" type="button" onclick='xmlhttpPost("/cgi-bin/search-vm.pl")' />
<input value="Clear" type="button" onclick="clearBox('result')" />
</center>
</p>
<div id="loading"></div>
<div id="result"></div>
</form>

如您所见，有一个文本输入字段和一些其他按钮，其中一个有一个与之关联的 onclick() 侦听器。当用户输入文本并按回车时，如何触发该按钮上的 onclick 事件？

从论坛尝试了这个解决方案，但不知何故不起作用：

$('#vms').keypress(function(event){
if (event.which === 13){
$('#searchbutton').click();}
});

顺便说一句，当我在字段中输入文本并单击搜索按钮时，它工作得很好。但是输入文本并按 Enter 不会以某种方式触发搜索事件。

【问题讨论】：

我认为 jQuery 事件不会触发非 jquery 侦听器，是吗？
@mhodges 如果您的意思是$('#searchbutton').click(); 触发onclick 属性中的函数，它确实会触发。简单演示：jsfiddle.net/v11y6kab。 trigger 的文档中的详细信息。
Trigger a button click with JavaScript on the Enter key in a text box的可能重复
您不需要在xmlhttpPost 调用之前在onclick 属性中调用JavaScript:，这有点多余。只有当你有一个锚并且使用 href 来触发一个 JavaScript 函数时，你才需要它。
@MikeMcCaughan 很公平，我想我记得必须创建一个本地事件才能正确触发，但我不记得它是什么。现在我想起来了，我认为它与addEventListener("change") 不会被$.change() 触发，但<DOMELEMENT onchange="myFunction()"/> 确实与$.change() 一起使用... /shrug

标签： javascript jquery html event-listener

【解决方案1】：

修改了@GolezTrol 代码，以便输入文本字段上的 onChange 监听器间接触发搜索按钮的单击。

<form action="" method="get">
  Test field:
  <input type="text" name="test" onChange="aliasonclick">
  <br>
  <button name="searchbutton" id="clickthis" onclick="alert('it works!');">Submit</button>
  <button type="reset" value="Reset">Reset</button>
</form>

<script>
  function aliasonclick() {
    var searchbutton = document.getElementById("clickthis")
    searchbutton.click()
  }
</script>

【讨论】：

是的，在 chrome 浏览器上对我有用。每当我选择文本字段并按回车键时，我都会收到一个警告对话框。
好的。现在工作。如果你这样做，你可以完全删除表单标签，这很好，因为 OP 不想让表单做任何事情。
.onchange 在用户提交对其附加的文本字段的值进行更改时触发事件。

【解决方案2】：

将$('#searchbutton').click(); 更改为$('#searchbutton').trigger('click');

【讨论】：

不幸的是，这也没有改变行为 - 搜索仍然没有发生..

【解决方案3】：

将按钮的类型更改为submit。提交按钮在同一表单的其中一个编辑中按下回车键时会抓住它。在下面的示例中，您可以对其进行测试。将光标放在编辑框中，然后按回车键。您应该收到警报。

<form action="" method="get" onsubmit="return false;">
Test field: <input type="text" name="test"><br>
<button type="submit" value="Submit" onclick="alert('it works!');">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>

请注意，这是一个浏览器实现细节。我不知道有哪个浏览器无法使用，但同时我不能保证它可以在任何浏览器和任何平台上运行。

【讨论】：

不能这样做，因为我试图避免重新加载页面。
您可以在表单的 onsubmit 事件中使用 JavaScript 防止页面重新加载。有了额外的好处，您可以在非 JavaScript 环境中重新加载页面，如果您关心的话。
请详细说明一下（最好使用一些示例代码；-）如何创建 onsubmit() 侦听器以防止页面重新加载？
将确切的短语 "onsubmit() listener to prevent a page reload" 粘贴到 Google 中，您会发现 4 个 SO 问题（this、this、 this 和 this) 作为前 4 个结果。当然，您可以在那里找到解决方案。 :-)
但在你的情况下，如果你总是想阻止它，你可以在表单中添加onsubmit="return false;"，正如我在答案中添加的那样。