如何在不單擊 Javascript 的按鈕的情況下觸發操作？

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 鍵集成谷歌搜索 function。 我怎樣才能做到這一點？

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 function 中，並在按下回車時調用它，所以

<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>