输入HTML表格运行javascript？

Question

我在这里构建一个newtab页面:

http://codepen.io/Thisisntme/full/VvgeyV

此页面包含漂亮的设计内容和谷歌搜索栏.但是,当我按Enter键时,不是搜索谷歌,而是打开相同的窗口http://codepen.io/Thisisntme/full/VvgeyV?inputbox=TEST_INPUT ("TEST_INPUT"是输入框中的任何内容).

当我向左按下提交按钮时,它实际上是搜索.

按下回车键后如何进行此搜索？

这是对表单重要的代码.

HTML:

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

CSS:

#backgroundstuff canvas {
   outline: 0px;
   position: fixed;
   left: 0px;
   top: 0px;
   /*width: auto;
   height: 100%;*/

   z-index: -99;
}

使用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);
}

Answer 1

输入键自动提交表单.

如果action表单上没有定义,则默认为同一页面.

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

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

• 设置action:

  <form method="GET" action="https://www.google.com/search">
  

• 设置name为要传递的参数的名称:

  <input type="text" name="q" placeholder="Search with me!">
  

有了这两个,你将不需要这个google功能.您的"搜索"按钮可以是一个简单的提交:

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