JavaScript/jQuery:显示DIV，直到用户停止在Textbox中键入

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

本文关键字：Textbox 用户 jQuery 显示 DIV JavaScript      更新时间：2023-09-26

我在我的网站上使用了几个文本框（输入类型=文本），我有一个div，它是隐藏的（显示：无）。

现在，我希望用户在其中一个文本框中输入一些文本，此时，div应该出现几秒钟并隐藏，当用户停止添加文本时。div也应该等到用户停止悬停div。我真的很努力，但没能正确完成。

下面是一个JSFIDDLE示例来展示我的意思：

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>

我尽了最大努力使用不同的功能，如"延迟"或"setTimeout"，甚至每隔几秒钟用"SetInterval"检查一次。。。但什么都没用。我试图在JSFiddle的JavaScript字段中解释更多细节。

提前谢谢。

您所要做的就是将setTimeout存储在一个变量中，然后在需要时清除该超时：

用hover替换了mouseenter，但无论哪种方式都可以。

注意
.InfoBox元素最初是不可见的，因此当它出现在鼠标指针下时，在移动鼠标指针之前，它不会被悬停。

// 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>

不要在mouseenter上使用，而是像这样使用更改：

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

示例jsfiddle：http://jsfiddle.net/rec2Ltsm/

相关文章：