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