JavaScript / jQuery: Displays DIV until the user stops typing Textbox

综合技术 2018-05-16 阅读原文

I use a few textboxes on my website (input type=text) and I have that one div, which is hidden (display: none).

Now I'd like the user to enter some text in one of those textboxes and exactly at that moment, the div should appear for a few seconds and hide, WHEN THE USER STOPS ADDING TEXT. The div should also wait until the user stops hovering the div. I really tried hard but couldn't get it done correctly.

Here is a JSFIDDLE-Example to show what I mean:

var InfoBoxHovered = false;

$(".TextBox1").on("input", function() {
    $(".InfoBox").fadeIn();
    setTimeout(function () {
        $(".InfoBox").fadeOut();
    }, 3000);
 });

$(".TextBox2").on("input", function() {
    $(".InfoBox").fadeIn();
    if (!InfoBoxHovered){
        setTimeout(function () {
            $(".InfoBox").fadeOut();
        }, 3000);
    }
 });

$(".InfoBox").mouseenter(function(){
    InfoBoxHovered = true;
})
$(".InfoBox").mouseleave(function(){
    InfoBoxHovered = false;
})

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //

//The INFOBOX-DIV should APPEAR, when the user enters some text
//The INFOBOX-DIV should DISAPPEAR, 3 SECONDS AFTER THE USER STOPPED ENTERING TEXT
//The Infobox-Div should not disappear after 3 seconds and appear again - it should stay until the user finished entering text and then wait 3 seconds before it fades out
//The InfoBox-div should be visible, as long as the user hovers the div and should then fade out, if the 3 seconds are over
.Main{
    background-color: lightgrey; min-width: 100%; min-height: 200px; text-align: center;
}
.Header{
    font-family: Arial; color: red; font-size: 18px; font-weight: bold;
}
.InfoBox{
    position: fixed; left:0; right:0;background: rgba(0,0,0,.75); z-index: 20; bottom: 20px;
    margin: 0 auto; width: 500px; height: 80px; border-radius: 4px; text-align: center;
    color: white; padding: 15px; font-family: Arial; display: none;
}

Input-Fields

Information

I tried my very best with different functions like "delay" or "setTimeout" or even check it every few seconds with "SetInterval"... But nothing worked. I tried to explain a few more details in the JavaScript-Field in JSFiddle.

Thanks in advance.

All you have to do is to store setTimeout
in a variable, then clear
that timeout when needed:

Replaced the mouseenter
with hover
, but it will work either way.

NOTE

The .InfoBox
element is initially invisible, so that when it appears under the mouse pointer, it will not get hovered until the mouse pointer gets moved.

// declare timer variable which holds the timeout:
var timer;

$(".TextBox1").on("input", function() {
    $(".InfoBox").fadeIn();
    // clear the timer if it's already set:
    clearTimeout(timer);
    timer = setTimeout(function () {
        $(".InfoBox").fadeOut();
    }, 3000);
 });

$(".TextBox2").on("input", function() {
    $(".InfoBox").fadeIn();
    // clear the timer if it's already set:
    clearTimeout(timer);
    timer = setTimeout(function () {
        $(".InfoBox").fadeOut();
    }, 3000);
 });

$(".InfoBox").hover(function(){
    // clear the timer on hover, so that the box won't disapear:
    clearTimeout(timer);
}, function(){
    // set the timer again when mouse is outside of the box:
    timer = setTimeout(function () {
        $(".InfoBox").fadeOut();
    }, 3000);
});
.Main{
    background-color: lightgrey; min-width: 100%; min-height: 200px; text-align: center;
}
.Header{
    font-family: Arial; color: red; font-size: 18px; font-weight: bold;
}
.InfoBox:hover{
    background: rgba(0,0,0,.9);
}
.InfoBox{
    position: fixed; left:0; right:0;background: rgba(0,0,0,.75); z-index: 20; bottom: 20px;
    margin: 0 auto; width: 500px; height: 80px; border-radius: 4px; text-align: center;
    color: white; padding: 15px; font-family: Arial; display: none;
}

Input-Fields

Information

Hello, buddy!

责编内容by:Hello, buddy!阅读原文】。感谢您的支持!

您可能感兴趣的

Apply the jquery function for loaded ajax content I have an issue.. the issue is jquery is not applying to a ajax content.. My ...
Sort UL numerically and in alphabetical order&... I'm wanting to sort this UL numerically and alphabetically, using each items ...
jQuery框架-1.基础知识 jQuery简介 jQuery,顾名思义是JavaScript和查询(Query),jQuery是免费、开源的。它可以简化查询DOM对象、处理事件、制作...
JQuery Plugin twice in one HTML page I wonder whether someone may be able to help me please. I've put together ...
Product Update November 2017 This month we have more updates to share around k6 (our new and open source l...