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

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!责编内容来自:Hello, buddy! (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » JavaScript / jQuery: Displays DIV until the user stops typing Textbox

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录