JavaScript/jQuery: Show DIV until user stops typing in Textbox

Question

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;
}

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<div class="Main">
    <br/>
    <span class="Header">Input-Fields</span>
    <br/><br/>
    <input type="text" name="title1" placeholder="Enter Some Text" class="TextBox TextBox1"/>
    <input type="text" name="titlew" placeholder="Enter Some Text" class="TextBox TextBox2"/>
</div>

<div class="InfoBox">
    Information
</div>

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.

Have a look to this question: http://stackoverflow.com/questions/4220126/run-javascript-function-when-user-finishes-typing-instead-of-on-key-up — D4V1D, Mar 28 '15 at 14:15

Artur Filipiak · Accepted Answer · 2015-03-28T14:40:37.823

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;
}

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<div class="Main">
    <br/>
    <span class="Header">Input-Fields</span>
    <br/><br/>
    <input type="text" name="title1" placeholder="Enter Some Text" class="TextBox TextBox1"/>
    <input type="text" name="titlew" placeholder="Enter Some Text" class="TextBox TextBox2"/>
</div>

<div class="InfoBox">
    Information
</div>

jrod · Answer 2 · 2015-03-28T14:23:47.723

-1

instead of using on mouseenter, use change like so:

$(".InfoBox").change(function(){
    InfoBoxHovered = true;
});

example jsfiddle: http://jsfiddle.net/rec2Ltsm/

edited Mar 28 '15 at 14:23

answered Mar 28 '15 at 14:13

jrod

66
1
6

JavaScript/jQuery: Show DIV until user stops typing in Textbox

2 Answers2