如果未设置cookie且未选择任何输入，则在10秒后隐藏登录表单

hide sign in form after 10s if cookie not set and no inputs are selected

本文关键字：10秒 则在 登录 表单 隐藏 输入 cookie 设置 选择 任何 如果      更新时间：2023-09-26

我正在为我的网站开发一个小功能，当网站打开时，登录表单会自动显示在导航栏中，但前提是没有设置特定的cookie。然后，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还很陌生，所以任何指针和修复程序都将不胜感激。

编辑：请检查我上面更新的代码。

即使其中一个输入被聚焦，间隔仍将继续，而不是停止。

感谢

如果我正确理解你的目标，你还想在输入失去焦点10秒后隐藏表单。在这种情况下，更容易绑定到focusin/focusout事件来重新启动超时，否则，当在间隔触发之前留下输入时，它会比超时早得多被隐藏。

var inputs = $('#user-pest, #pass-pest'),
    hideTimeout,
    checkFocus = function(){
        var hide = !inputs.is(':focus');
        if(hide===!!hideTimeout)return;
        if(hide)
            hideTimeout = setTimeout(hideFormSet, 10000);
        else
            hideTimeout = clearTimeout(hideTimeout);
        };
inputs.focusin(checkFocus).focusout(checkFocus);
checkFocus();

注意，jQuery的is方法检查jq数组中是否有任何元素对应于选择器，因此您可以执行以下操作，而不是单独的和/或：$('#user-pest, #pass-pest').is(':focus')

Fiddle 示例

Sidenote2，(重新(绑定将发生两次，因为一个输入在下一个输入获得焦点之前失去焦点。这本身不是问题，但如果表单只包含这两个输入，那么使用事件冒泡来检查表单本身的焦点可能是进一步优化的一小步：inputs.parent().focusin(checkFocus).focusout(checkFocus);

您需要一个&amp；在这一行。

if(!$("#user-pest").is(':focus') || !$("#pass-pest").is(':focus')){

你以前有

if( user-pest is not focused OR pass-pest is not focused)

用户不能同时关注这两个对象，因此这将始终评估为true，隐藏将设置为true。使用以下内容：

if(!$("#user-pest").is(':focus') && !$("#pass-pest").is(':focus')){

或者，您也可以使用以下

if($("#user-pest").is(':focus') || $("#pass-pest").is(':focus')){
    var hide = false;
} else {
    var hide = true;
}

正如你在评论中指出的，还有另一个问题，我第一次错过了。

隐藏变量是在页面加载时设置的，这会立即发生，而且您很可能还没有时间关注任何一个对象。您应该将检查代码是否集中到超时回调内部。

请参阅这个jsFiddle以获得一个工作示例的完整代码。基本上，您的超时应该在运行时检查输入是否集中，而不是页面加载，如以下片段所示。

setTimeout(function() {
  if (!$("#user-pest").is(':focus') && !$("#pass-pest").is(':focus')) {
    $("#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");
    document.cookie = "signinNav=set"; // set the cookie so the form doesn't appear when they come back later
  }
}, 2000);

这里有一个解决方案，可以确保每个输入都是空的，并且它们不集中。没有指定超过最初10秒超时的行为，所以我将间隔保持为活动状态——只要超时过去并且满足隐藏标头的条件，就会调用隐藏行为。

如果您想让它成为一个"一次性"计时器，只需在intervalHandler函数中使用clearInterval即可。

window.addEventListener('load', onDocLoaded, false);
var intervalHandle;
function onDocLoaded(evt)
{
	intervalHandle = setInterval(intervalHandler, 2000);
}
function hideHeader()
{
	document.getElementById('darknet-login-nav').classList.add('hidden');
}
// returns true/false
// true if the header should be hidden, false otherwise.
// Things that will prevent the header from being hidden area
// 0) content in the #user-pest input
// 1) content in the #pass-pest input
// 2) focus of either #user-pest or #pass-pest elements
function shouldHideHeader()
{
	if (document.getElementById('user-pest').value != '')
		return false;
		
	if (document.getElementById('pass-pest').value != '')
		return false;
		
	if (document.activeElement == document.getElementById('user-pest'))
		return false;
		
	if (document.activeElement == document.getElementById('pass-pest'))
		return false;
		
	return true;
}
function intervalHandler()
{
	if (shouldHideHeader())
		hideHeader();
}
.darknet-nav-login-form
{
	height: 42px;
}
.hidden
{
	height: 0px;
	overflow: hidden;
	transition: height 2s;
}
<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>

相关文章：