反覆Ajax請求與KEYUP，重點和鍵盤按鍵

Question

$('#input').focusin(function() { 
 
    $('#div').show(); 
 
    
 
    $('#input').keyup(function() { 
 
    $('#div').show(); 
 
    //AJAX-REQUEST// 
 
    }); 
 
}); 
 

 
$('#input').focusout(function() { 
 
    $('#div').hide(); 
 
});

#div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="input"> 
 
<div id="div">Hello World</div>

你好，在這裏我的代碼它顯示和隱藏div而foucsed in和out，

當我按下ctrl，shift ，arrows,space或tab，因爲它現在沒有AJAX請求，所以它正常工作，並保持顯示div，

但是在每次按下任何一個前面提到的密鑰時，加上AJAX Request它會再次發送AJAX Request，並刷新div。

如何在添加AJAX Request時防止該行爲？

Answer 1

首先，請注意您應該移動keyup處理外focusin處理程序。就像現在這樣，您每次點擊輸入時都會添加另一個AJAX請求。

爲了解決這個問題，我從你的描述中假設你只想在非空白字符輸入時進行AJAX請求。如果是這樣，請改用keypress事件。

還要注意的是focus()和blur()將更多的語義在這裏和focusin()爲focusout()還有的input沒有子元素。試試這個：

$('#input').focus(function() { 
 
    $('#div').show(); 
 
}).blur(function() { 
 
    $('#div').hide(); 
 
}).keypress(function() { 
 
    console.log('Making an AJAX request now...'); 
 
});

#div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="input"> 
 
<div id="div">Hello World</div>

Answer 2

您正在註冊一個通用鍵控的處理程序，但您只想在元素被關注時才運行它。

$('#input').focusin(function() { 
    $(this).data('focused', true); 
    $('#div').show(); 
}); 
$('#input').focusout(function() { 
    $(this).data('focused', false); 
}); 
$('#input').keyup(function() { 
    if (!$(this).data('focused')) { 
     return; 
    } 
    $('#div').show(); 
    //AJAX-REQUEST// 
});