0
私はコードペインの演習に取り掛かりました。そして、拡大鏡をクリックして検索を書いて、enterを押しています。検索エリアが上に移動し、ここがすべて正常に機能します。検索エリアをクリックすると、プログラムは一歩前進します（JavaScript）
検索領域が上に移動したときに問題が発生します。検索領域をクリックすると再び下に移動します。私はそれを無効にしているにもかかわらずフォームがその原因であると思われ、私はfalseを返しました。
この問題の原因は何ですか？どのように問題を解決しますか？ここで
あなたは、コード自体へのリンクを持っている： http://codepen.io/rafahuelin/pen/ygNKzQ
警告：コードは、この投稿に添付スニペットに正常に動作していないが、私はcodepen上で動作することに興味を。助けのための
感謝:)
$(document).ready(function() {
// Appears the magnifier icon
$("#search").html("<div id='magnifier' class='search-init animated fadeIn'> <div id='magnifier-stick' class='stick-appears'></div> </div>");
// When clicking on the icon appears the input form
if ($("#magnifier")) {
$("#search").on("click", function() {
$("#magnifier-stick").addClass("animated fadeOut stick-disappears").removeClass("stick-appears");
$(".search-init").addClass("search-input").removeClass("search-init");
setTimeout(function() { \t \t //waits for 1s
$("#search").html("<div class='search-input'><form><input id='input-form' class='animated fadeIn' type='text' name='searchContent' placeholder='Type Your Search Here...'></form></div>");
$("#input-form").focus();
}, 1000);
});
}
//After pressing Enter,
$("#search").on("submit", function (e) {
var searchText = $("#input-form").val(); //<---JQuery var searchText = document.getElementById("input-form").value; <---In javascript
moveSearchUp(searchText);
return false;
});
//send request to API
//search-input moves up
function moveSearchUp(searchText) {
$(".search-input").addClass("search-top").removeClass("search-input");
setTimeout(function() { \t \t //waits for 1s
//$("#search").html("<div class='search-top'><form><input id='input-form' class='animated fadeIn' type='text' name='searchContent' value='" + searchText + "'></form></div>");
$("#input-form").css({ 'width': searchText.length * 7 + 'px' });
}, 500);
//$("#input-form").attr("disabled", "disabled"); //Disable textbox to prevent
$("#input-form").prop('disabled', true);
$("#input-form").attr("disabled", "disabled"); //Disable textbox to prevent multiple submit
$("#input-form").on("click", function (e) {
return false;
});
// \t return false;
} \t // end function moveSearchUp
}); // $(document).ready.test {
background-color: yellow;
}
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;
}
#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;
}
#input-form, #input-form:focus {
width: 100%;
min-width: 120px;
border-radius: 35px;
outline: none;
border: none;
padding-left: 20px;
padding-right: 20px;
transition: all 500ms 500ms ease;
}
.search-input {
line-height: 56px;
height: 70px;
width: 570px;
border: 4px solid green;
border-radius: 35px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
transition: all 500ms 500ms ease;
}
.search-top {
line-height: 40px;
height: 54px;
border: 4px solid green;
border-radius: 27px;
top: 50px;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
transition: all 500ms 500ms ease;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="search">
</div>
</body>
</html>
感謝を助けるために投票 – Rafa