私は codepen.io の演習に取り組んでいますが、入力領域で Enter キーを押すたびにプログラムが再起動する理由がわかりませんが、それを避けるためにいくつかの ifs ステートメントを追加しました。
ここで同じコードをstackoverflowとJavascriptで試しましたが、それ自体は再起動しません。コードペンへのリンクを添付して、実際の問題を確認してください。
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).readyhtml {
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>