为什么每次按Enter键进入输入区域时我的Javascript都会重新启动？ codepen附加

Question

我正在对codepen.io进行练习，我不知道为什么每次按下输入区域的回车键，程序都会自动重启，虽然我已经添加了一些ifs语句来避免它。

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

http://codepen.io/rafahuelin/pen/qRdWBy?editors=0010

我认为原因是我不知道的。请问，请告诉我导致这种情况发生的原因以及管理此程序行为的方法是什么？

谢谢！

$(document).ready(function() {

  // Appears the magnifier icon
  var initializeSearch = false;
  if (initializeSearch === false) {
    initializeSearch = true;
    $("#search").html("<div id='magnifier' class='search-init animated fadeIn'> <div id='magnifier-stick' class='stick-appears'></div> </div>");
    console.log("after #search");


    // When clicking on the icon appears the input form
    var magnifierClicked = false;
    $("#search").on("click", function() {
      if (magnifierClicked === false) {
        magnifierClicked = true;
        $("#magnifier-stick").addClass("animated fadeOut stick-disappears").removeClass("stick-appears");
        console.log("after magnifier-stick");
        $(".search-init").addClass("search-input").removeClass("search-init");
        console.log("after search-init");
        setTimeout(function() { //waits for 1.2s
          $("#search").html("<div id='search-input'><form><input id='input-form' class='animated fadeIn' type='text' name='searchContent' placeholder='Type Your Search Here...'></form></div>");
          console.log("after search-input");
          $("#input-form").focus();
        }, 1200);
      } // if(magnifierClicked === false) 
    });
  } // avoid for looping	if (initializeSearch === false)
  //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");
  // 	}
  // });

  //send request to API


  //search-input moves up 
  // function moveItUp() {
  // 	$("#input-form").addClass("test");   //.addClass("animated fadeOut stick-disappears").removeClass("stick-appears");
  // }	


  //and the results appear down


}); // $(document).ready

html {
  height: 100%;
}
body {
  position: relative;
  width: 100%;
  height: 100%;
}
.search-init {
  height: 70px;
  width: 70px;
  border: 4px solid green;
  border-radius: 35px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  -webkit-animation-duration: 3s;
  -ms-animation-duration: 3s;
  -moz-animation-duration: 3s;
}
#magnifier-stick.stick-appears {
  height: 20px;
  width: 0;
  border: 2px solid green;
  transform: rotate(-45deg);
  top: 54px;
  left: 54px;
  position: absolute;
  transition: all 0.2s ease;
}
.search-input,
#search-input {
  height: 70px;
  width: 570px;
  border: 4px solid green;
  border-radius: 35px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  transition: all 400ms 400ms ease;
}
#magnifier-stick.stick-disappears {
  height: 0;
  width: 0;
  border: 2px solid green;
  transform: rotate(-95deg);
  top: 54px;
  left: 54px;
  position: absolute;
  transition: all 200ms ease;
  -webkit-animation-duration: 0.2s;
  -ms-animation-duration: 0.2s;
  -moz-animation-duration: 0.2s;
}
.search-input,
#search-input {
  line-height: 56px;
}
#input-form,
#input-form:focus {
  width: 100%;
  border-radius: 35px;
  outline: none;
  border: none;
  padding-left: 20px;
  padding-right: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search">
</div>

Answer 1

这是因为您正在使用forms。 Stack Snippets将不提交表单。提交表单时，您将在控制台中看到此内容，浏览器控制台：

  

阻止表单提交到''，因为表单的框架是沙箱并且未设置'allow-forms'权限。

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

尝试在此处提交表单，它会引发错误：

<form action="">
  <input type="text" />
  <input type="submit" />
</form>

在Chrome控制台中：

在Stack Overflow页面的源代码中：

<iframe name="35ff969b-5580-7f20-bd3f-8c9fa41b341a" sandbox="allow-modals allow-scripts" class="snippet-box-edit" frameborder="0"></iframe>

Answer 2

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

OP问道：

  

我不知道为什么，每次按下输入中的回车键   区域，程序重新启动，虽然我添加了一些ifs   避免它的陈述。

所以我假设他在按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使用了keypress而不是keyup（或keydown）。 keypress事件处理可打印字符（不包括Enter键）。因此，我建议如下答案。

旧回答：

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

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

codepen代码段：http://codepen.io/anon/pen/RKPQaO