HTML表单在回车时运行javascript？

我正在这里创建一个新的选项卡页面：

这个页面由一个漂亮的设计和一个谷歌搜索栏组成。然而，当我按enter键时，它打开的是同一个窗口，而不是搜索googlehttp://codepen.io/Thisisntme/full/VvgeyV?inputbox=TEST_INPUT 测试输入框中输入的内容

当我按下左边的submit按钮时，它实际上会进行搜索

按下enter键时，如何进行此搜索

下面是表单的重要代码

HTML:

Javascript

function google(form) {
   var gSearch = form.inputbox.value;
   window.location.href = 'https://www.google.com/search?q=' + gSearch;
   //window.location.replace('https://www.google.com/search?q=' + gSearch);
}

---

回车键自动提交表单

如果表单上未定义操作，则默认情况下该操作将位于同一页面

发布的数据将使用表单字段的name参数

使用适当的表单标记可以解决这两个问题

设置操作：

有了这两个功能，你就不需要谷歌功能了。您的搜索按钮可以是一个简单的提交：

<input type="submit" value="Click">

---

当您点击enter键时，它会提交表单并重新加载页面。您需要侦听表单提交事件，而不是单击。然后，您可以调用event.preventDefault来阻止表单提交

<form NAME="myform" onsubmit="event.preventDefault(); google(this)">

将您的html更改为：

<form NAME="myform" onsubmit="event.preventDefault(); google(this)">
  <div id = "textbox">
   <INPUT type="text" name="inputbox" value="" placeholder="Search with me!">
  </div>
   <input type="submit" name="button" value="Click">
</form>

这样它就可以在表单提交时工作，而不是单击按钮

---

同时确保取消活动，如胡安·门德斯（Juan Mendes）所示。

您可以执行以下操作：

<form onsubmit="return google(this)">
    <input type="text">
    <input type="submit">
</form>

---

通过这种方式，您可以实现基于键盘单击的搜索结果

---

$txtBox.keypressfunction事件，值{if event.which==13{var gSearch=form.inputbox.value；window.location.href=+gSearch；}

由于这是一个表单，按enter键将启动一个。 此事件用于提交请求并重新加载页面

要让它转到谷歌，你应该先捕获事件，并确保它不会冒泡或在默认情况下做任何事情

为此，只需在表单中添加一个id并捕获事件，例如

然后在JS中，将元素定位在这里

form=document.getElementById'to_cancel_submit'

在将表单放入变量中或直接放入变量中后，为其绑定处理程序并防止出现这样的默认事件并不重要

form.submit = function(e) {
    e.preventDefault(); // pretty obvious
    e.cancelBubble(); // prevents bubbling to parents
    return false; // both of the above

    // call your functions here...
}

---

将您的按钮更改为输入类型='submit'，然后它将在enter和click上工作。这比包括我的答案在内的任何其他方法都更好、更简单！这很有道理！几分钟后就可以接受了。这适用于url中的任何？var=对象，对吗？这正是html表单设计用来完成的任务@10答复：是，当使用默认的method=GET时，如果完全省略method，则对于任何非禁用的表单字段，数据将以格式name=value作为查询字符串发布。@10答复是，它将。GET请求通过这些路径传递。

<form NAME="myform" onsubmit="event.preventDefault(); google(this)">

<form NAME="myform" method="GET" action="https://www.google.com/search">
    <input type="text" name="q" placeholder="Search with me!">

<form NAME="myform" onsubmit="event.preventDefault(); google(this)">
  <div id = "textbox">
   <INPUT type="text" name="inputbox" value="" placeholder="Search with me!">
  </div>
   <input type="submit" name="button" value="Click">
</form>

<form onsubmit="return google(this)">
    <input type="text">
    <input type="submit">
</form>

function google(form) {
   // YOUR LOGIC HERE
   return false;
}

form.submit = function(e) {
    e.preventDefault(); // pretty obvious
    e.cancelBubble(); // prevents bubbling to parents
    return false; // both of the above

    // call your functions here...
}