5
サイトを開いたときにサインインフォームが自動的に表示されるサイト用の小さな機能を開発しています。特定のCookieが設定されていません。 10秒後にフォームが消えます。クッキーが設定されておらず入力が選択されていない場合、10秒後にサインインフォームを非表示にする
入力のいずれかに内容が含まれている場合は、ユーザがフォーム入力またはのいずれかを選択すると、開いたままになっていることも想定されます。 （#user-pestまたは#pass-pest）。
ほとんどの入力は、入力のいずれかが選択されているかコンテンツが含まれていても、10秒後にフォームがページから消えてしまいます。
次はのJavaScript（およびjQueryの）私が使用していたコード（を更新）です。
$(document).ready(function(){
// hide sign in form
function hideForm(){ // function for updating elements
$("#darknet-login-nav").css("display", "none");
$(".index-outer").css("height", "100px");
$(".index-inner").css("width", "438px");
$(".index-inner").css("top", "-10px");
$("#darknet-mast").css("font-size", "97px");
}
function hideFormSet(){ // function used for updating elements and setting cookie
hideForm();
document.cookie = "signinNav=set";
}
var checkDisplayed = getCookie("signinNav"); // get cookie contents
if(checkDisplayed == "set"){
hideForm(); // if cookie is set, hide the form
} else { // if it isn't
var hideInterval = setInterval(hideFormSet, 10000); // after 10 seconds, call hideFormSet function
if($("#user-pest").is(':focus') || $("#pass-pest").is(':focus')){
clearInterval(hideInterval); // if one of the inputs are focused on, stop the interval
} else {
hideInterval; // if they aren't focused, start the interval
}
}
});
これは私の単純化したマークアップです。
<div class="darknet-nav-login-form" id="darknet-login-nav">
<form action="" method="post">
<input type="text" name="username" id="user-pest" placeholder="Username" autocomplete="off"><br>
<input type="password" name="password" id="pass-pest" placeholder="Password" autocomplete="off"><br>
</form>
</div>
私はJavaScriptにまだまだ慣れていますので、あらゆるポインタや修正をいただければ幸いです。
編集：私の上記の更新コードを確認してください。
入力のオンにフォーカスがあっても、間隔は停止するのではなく、引き続き継続します。あなたはこのラインで& &を必要
おかげ
保守性を改善する方法、あなたは5つのCSS-方法は、あなたが同じコードを複製する必要がないようにあなたが呼び出す関数の呼び出しに変換する必要があります。 – Esko
@Eskoどうすればいいですか？ –
'function myFunction（）{$（"＃darknet-login-nav "）。css（" display "、" none "）;$（ "。index-outer"）。css（ "height"、 "100px"）; } 'そして次にmyFunction（）;それを – Esko