在輸入框中按下Enter鍵時調用JavaScript函數

Question

雖然我可以按Enter鍵來調用Javascript函數。 我在用戶按下Enter鍵時調用了shortIt()函數， shortIt()從輸入框中獲取了文本，並向Google URL Shortener API發出了返回短URL的請求，但生成的響應僅持續了幾秒鍾。 我在div中顯示響應。

似乎是一個很奇怪的問題，代碼在這里https://s3-ap-southeast-1.amazonaws.com/s3freebucket/URLShortner/url-shortner.html

但是，當我單擊shortIt按鈕以縮短網址時。 它工作正常並且響應文本保留在div中。

Answer 1

這是因為在按Enter鍵時， form提交。 發生這種情況時，您會注意到頁面正在重新加載。 這是默認行為，是使用<form> 。 在提交表單時，將加載表單action屬性中的頁面。 在這種情況下，未設置<form>的action屬性，因此只重載了您所在的頁面，因此腳本停止運行並重新加載了頁面。

解決此問題的兩個簡單方法：

1. （最簡單的方法）刪除表單標簽-它不用於提交任何內容，因此刪除它應該會使一切仍然有效

2. 觸發表單submit事件時，請阻止默認操作。

   使用JQuery：

   $('#myForm').on('submit', function (evt) { evt.preventDefault(); // prevents form submission });

其中myForm是您的表單標簽的ID。 您將需要在現有的html表單標簽中添加一個id屬性： <form id="myForm" class="form-horizontal">