如何在不使用 Java 脚本单击按钮的情况下触发操作？

Question

我做了一个文本输入来输入一些文本并在谷歌上搜索它。<input type="text" placeholder="type search word and press Enter to google" id="text" /><input type="button" id="btn" value="search" onClick="javascript:window.open('https://www.google.com/search?q=' + document.getElementById('text').value);" /><script>var input = document.getElementById("text");input.addEventListener("keyup", function(event) {  if (event.keyCode === 13) {   event.preventDefault();   document.getElementById("btn").click();  }});</script>我想摆脱搜索按钮，并仅通过按Enter键集成谷歌搜索功能。我该怎么做？

Answer 1

小提琴

使用表单和 ES6 语法是最简单、最有效的方法：

const $form = document.getElementById('form')

const $input = document.getElementById('input')

$form.addEventListener('submit', (evt) => {

  evt.preventDefault()

  window.open(`https://google.com/search?q=${$input.value}`)

})

<form id="form">

  <input type="text" placeholder="Search Google" id="input" />

</form>

Answer 2

这是工作演示：https://jsfiddle.net/usmanmunir/t1djucrx/2/

var input = document.getElementById("text");

input.addEventListener("keyup", function(event) {

  if (event.keyCode === 13) {

   event.preventDefault();   

   window.open('https://www.google.com/search?q=' + document.getElementById('text').value);

  }

});

Answer 3

如果要完全删除按钮，则只需将按钮中的代码放在javascript函数中，并在按下回车键时调用该代码，因此

<input type="text" placeholder="press Enter to google" id="text" />

<script>

var input = document.getElementById("text");

input.addEventListener("keyup", function(event) {

  if (event.keyCode === 13) {

   event.preventDefault();

   window.open('https://www.google.com/search?q=' + document.getElementById('text').value);

  }

});

</script>