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!阅读原文】。感谢您的支持!

您可能感兴趣的

Having trouble with promises in nodejs I'm trying to use promises with nodejs (I'm trying with node-promise package); however, without any success. See the cod...
I’m trying to figure out how an animation wa... http://alpha.patterntap.com/ if you hover over the images, notice the nice border that animates inward, is tha...
Jquery Validations on dynamic fields php echo Hi i am developing a multi page form in which you have to enter the number of people in the first step and then in the n...
Jquery new Date – Convert to aayy-MM-dd and ... I have a HTML input box set to type=date I want to use Jquery to fill this input box on document load to today's...
Hide a div on hovering over menu bar Whenever I hover over the second button in the menu, a "submenu" appears. When it appears, it partially covers t...