javascript - 消失 div onblur

Question

html

<input type="text" id="match1">
<div id="divf">It is a div which has a dark future</div>
<button>Not Remove</button>

和脚本

$(function(){
    $("input").blur(function()
    {
       $("#divf").remove(); 
    });
});

现在，从代码中可以清楚地看出，我希望在输入模糊时删除 div。但是如果有人单击按钮，我不希望删除 div。我不知道该怎么做。有人能解决这个问题吗

Answer 1

You could set a timeout in the .blur() and then clear it when the button is clicked.

var to = false;

$('input').blur(function() {
    // start the timer
    to = setTimeout('removeDiv', 200);
});

$('button').click(function() {
    // if the timer is still running, clear it
    to && clearTimeout(to);
});

function removeDiv()
{
    $("#divf").remove();
    // reset timer
    to = false;
}

When the focus goes from the input straight to the button (it's clicked), the timer is cleared and the div is not removed.

Answer 2

我已经编辑了@Adil 的答案并得到了我想要的

$(function(){
       var isButtonClicked = false;
       $('button').one('mousedown', function(){
      isButtonClicked = true;
    });

    $("input[type=text]").blur(function()
        {
           if(!isButtonClicked) 
               $("#divf").remove();
               else isButtonClicked = false;
        });
    });

Answer 3

使用此代码而不是您的代码

$(function(){
    $("#match1").blur(function()
    {
       $("#divf").remove(); 
    });
});

Answer 4

如果您只想放置具有 id match1 的文本字段，则仅当字段为蓝色时 div 才会被删除

$(function(){

   var isButtonClicked = false;
   $('button').one('click', function(){
      isButtonClicked = true;
   });

    $("#match1").blur(function()
    {
       if(!isButtonClicked)
            $("#divf").remove(); 
    });
});

如果您只想输入文本，则 div 将在每个文本框的蓝色上删除

    $(function(){
       var isButtonClicked = false;
       $('button').one('click', function(){
      isButtonClicked = true;
    });

    $("input[type=text]").blur(function()
        {
           if(!isButtonClicked) 
               $("#divf").remove(); 
        });
    });