为什么我的 Javascript 每次在输入区按回车键时都会重新启动？附上代码笔

Question

我正在做一个关于 codepen.io 的练习，但我不知道为什么，每次我在输入区按下回车键时，程序都会自行重启，尽管我已经添加了一些ifs 语句来避免它。

我在 Whosebug 中尝试了相同的代码，Javascript 它不会自行重启，我将 link 附加到 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 将 不提交 表单。当您提交表单时，您将在控制台中看到这个，浏览器控制台:

Blocked form submission to '' because the form's frame is sandboxed and the 'allow-forms' permission is not set.

这是在 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 问：

i don't know why, every time that I press the enter key in the input area, the program restarts itself, although I've added some ifs statements to avoid it.

所以我假设他是在询问有关在按回车键时禁用表单提交的问题。由于 OP 在 Whosebug 中发现此行为不同于 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）。按键事件处理可打印字符（不包括回车键）。因此我提出了以下答案。

旧答案：

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

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

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

为什么我的 Javascript 每次在输入区按回车键时都会重新启动？附上代码笔

Why is my Javascript restarting every time I press enter in the Input area? codepen attached

javascript

jquery

codepen