javascript - 在输入框中按 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

这是因为按下回车键后，form被提交。发生这种情况时，您会注意到页面重新加载。这是默认行为，是使用 <form> 的结果。 。提交表单时，表单中的页面 action属性已加载。在这种情况下 action <form> 的属性未设置，因此您所在的页面只是重新加载，因此脚本停止运行并重新加载页面。

解决此问题的两个直接选项:

1. (最简单)删除表单标签 - 它不用于提交任何内容，因此删除它应该会使事情仍然有效

2. 防止表单 submit 时的默认操作事件被触发。

   使用 JQuery:

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

哪里myForm是您的表单标签的 ID。您需要将 id 属性添加到现有的 html 表单标记中:<form id="myForm" class="form-horizontal">