为什么每次在输入区域按enter键时，Javascript都会重新启动？附代码笔

我正在codepen.io上做一个练习，我不知道为什么每次我在输入区域按enter键时，程序会自动重新启动，尽管我添加了一些ifs语句来避免它

我在stackoverflow和Javascript中尝试了相同的代码，但它不会自行重新启动，我将链接附加到codepen，以便您查看实际问题：

我想原因是我不知道的。你能告诉我是什么导致了这种情况的发生，以及管理这种程序行为的方法吗

谢谢

$（文档）.ready（函数（）{
//显示放大镜图标
var initializeSearch=false；
如果（initializeSearch==false）{
initializeSearch=true；
$（“#搜索”）.html（“”）；
console.log（“搜索后”）；
//单击图标时，将显示输入表单
var=false；
$（“#搜索”）。在（“单击”，函数（）上）{
如果（放大镜单击===false）{
放大镜=真；
$（“#放大镜棒”）.addClass（“动画淡出棒消失”）.removeClass（“棒出现”）；
console.log（“放大镜棒后”）；
$（“.search init”）.addClass（“搜索输入”）.removeClass（“搜索init”）；
log（“搜索初始化后”）；
setTimeout（函数（）{//等待1.2s
$（“#搜索”）.html（“”）；
console.log（“搜索输入后”）；
$（“#输入表单”）.focus（）；
}, 1200);
}//如果（放大镜单击===false）
});
}//如果（initializeSearch==false），则避免循环
//按Enter键后，
//$（“#输入格式”）。按键（“按键”），功能（按键）{
//如果（按键===13）{
////禁用文本框以防止多次提交
//$（“#输入表单”）.attr（“禁用”、“禁用”）；
//控制台日志（“按键”）；
// 	}
// });
//向API发送请求
//搜索输入向上移动
//函数moveItUp（）{
//$（“#输入表单”）.addClass（“测试”）；/.addClass（“动画淡出棒消失”）.removeClass（“棒出现”）；
// }	
//结果显示出来了
}); // $（文档）。准备就绪

html{
身高：100%；
}
身体{
位置：相对位置；
宽度：100%；
身高：100%；
}
.search init{
高度：70像素；
宽度：70px；
边框：4倍纯绿；
边界半径：35px；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
位置：绝对位置；
-webkit动画持续时间：3s；
-ms动画持续时间：3s；
-moz动画持续时间：3s；
}
#出现放大镜-stick.stick-{
高度：20px；
宽度：0；
边框：2倍纯绿；
变换：旋转（-45度）；
顶部：54px；
左：54px；
位置：绝对位置；
过渡：所有0.2秒缓解；
}
.搜索输入，
#搜索输入{
高度：70像素；
宽度：570px；
边框：4倍纯绿；
边界半径：35px；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
位置：绝对位置；
过渡：所有400ms 400ms缓解；
}
#放大镜-棒。棒-消失{
身高：0；
宽度：0；
边框：2倍纯绿；
变换：旋转（-95度）；
顶部：54px；
左：54px；
位置：绝对位置；
过渡：所有200ms缓解；
-webkit动画持续时间：0.2s；
-ms动画持续时间：0.2s；
-moz动画持续时间：0.2s；
}
.搜索输入，
#搜索输入{
线高：56px；
}
#输入表格，
#输入表格：焦点{
宽度：100%；
边界半径：35px；
大纲：无；
边界：无；
左侧填充：20px；
右边填充：20px；
}

---

这是因为您使用的是

表单。堆栈片段将不提交表单。提交表单时，您将在控制台、浏览器控制台中看到：

阻止表单提交到“”，因为表单的框架已沙盒化，并且未设置“允许表单”权限

这是在堆栈代码段中实现的沙盒安全功能，以避免将用户凭据和数据从堆栈代码段提交到个人网站

尝试在此处提交表单，它将抛出一个错误：


基于评论中讨论的新答案：

OP询问：

我不知道为什么，每次我按输入键时
区域，程序自动重新启动，尽管我添加了一些if
声明来避免它

因此，我假设他在按enter键时询问是否禁用表单提交。因为OP发现Stackoverflow中的这种行为与Codepen中的不同。他想在Codepen上模仿同样的概念

OP注释掉了此代码，因为它不工作：

 //After pressing Enter, 
  // $("#input-form").keypress("pressedKey", function(pressedKey){
  //    if(pressedKey === 13){
  //        //Disable textbox to prevent multiple submit
  //     $("#input-form").attr("disabled", "disabled");
  //        console.log("key pressed");
  //    }
  // });

这是因为OP使用了按键而不是keyup（或keydown），所以无法工作。keypress事件处理可打印字符（不包括Enter键）。因此，我提出了以下答案

旧答案：

您可以这样处理表单提交：

$("#search").on("submit", function() {
    // You can return false to stop it or handle anyway you like
    return false;
});

代码笔片段：
因为您有一个表单，按enter键提交表单这不是答案。正确阅读问题。感谢您取消否决票。我想我已经尽力解释了我的答案。希望同样投反对票的人会阅读评论并重新评估他的决定。很高兴你接受了我的回答。“如果你也投上一票，我将不胜感激。”PraveenKumar我认为你应该保留它。我实际上对你的答案投了赞成票。它向OP解释了为什么会发生这种行为（这是OP所问的）。@PraveenKumar，你的问题是正确的，它帮助我在stackoverflow的片段中遇到了另一个问题。非常感谢。