javascript - 为输入字段设置默认按钮（或在 javascript 中触发其事件）的最佳方式，而不是表单的一部分

Question

我有一个独立的输入字段，不是任何表单的一部分。

我还有一个按钮，它有一些 onclick 事件。

当我在输入字段中输入内容并按下 Enter 键时，我希望它能够有效地按下按钮，或触发其 onclick 事件。所以这个按钮可以说是“输入字段的默认按钮”。

<input id='myText' type='text' />
<button id='myButton' onclick='DoSomething()'>Do it!</button>

我想我可以弄乱输入字段的 onkeypress 或 onkeydown 事件并检查 Enter 键等。

但是有没有更“干净”的方式，我的意思是将按钮与该输入字段相关联，以便该按钮是该字段的“默认操作”或其他内容？

请注意，我不在表单内，我没有发送、发布或提交任何内容。DoSomething() 函数只是在本地更改一些 HTML 内容，具体取决于文本输入。

score 2 · Accepted Answer

将 HTML 更改为：

<form onsubmit="DoSomething();">
  <input id='myText' type='text' />
  <input type="submit" value="Do it!" />
</form>

按下回车键会自动触发提交按钮（在表单中）。

确保您取消提交事件，但您不希望浏览器重新定位。

使用取消默认值：event.preventDefault()或让您的函数返回false。

score 0 · Accepted Answer

尝试将您的 javascript 与您的标记分开。

HTML

<form id="myform">
  <input id='myText' type='text' />
  <input type="submit" value="Do it!" />
</form>

JS

$("#myform").submit(function(e) {
     // do something
     e.preventDefault();
});

编辑：

如果您不想使用表单，那么您可以简单地执行以下操作：

$("#mybutton").on('click', function(){
     // Do something
});

score -1 · Accepted Answer

更好的解决方案是不使用 html javascript 事件，它比较旧。更好的是它在 MVC 等层中的单独代码，html 是视图，.js 是控制器

我创建一个文件functions.js

jQuery("#myButton").on("click", function() {DoSomething()});

3 回答 3