在输入框中按Enter键调用JavaScript函数

Question

虽然我可以在按下回车键时调用Javascript功能。我在用户点击回车键时调用函数shortIt（），shortIt（）从输入框中获取文本并向Google URL Shortner API发出请求，返回一个短URL，但生成的响应只显示几秒钟。 我在div中显示响应。

似乎是一个非常奇怪的问题，代码在这里https://s3-ap-southeast-1.amazonaws.com/s3freebucket/URLShortner/url-shortner.html

但是当我点击shortIt按钮来缩短网址时。它工作正常，响应文本保留在div中。

Answer 1

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

用于解决此问题的两个直接选项：

1. （最简单）删除表单标记 - 它不用于提交任何内容，因此删除它应该让事情仍然有效

2. 在触发表单<form>事件时阻止默认操作。

   使用JQuery：

   submit

其中$('#myForm').on('submit', function (evt) { evt.preventDefault(); // prevents form submission });是表单标记的ID。您需要在现有的html表单标记中添加id属性：myForm