使用Javascript來捕獲錯過的keydown事件

Question

免責聲明：我不是一個真正的開發人員，所以我可能在這裏得到了一些代碼意大利麪條......現在我需要與我所得到的一起工作，這意味着我可能結束了一個管道式膠帶修復。 ;-)

我使用的JavaScript和PHP執行以下操作：

• 閃屏
• 「聽」的，捕捉按鍵（特定鍵指示上的一對圖像左或右圖像）
• 重複10對圖像

我已經有JavaScript的改變與圖像對的div的知名度，並調用事件監聽器做了，所有的精確計時。 「捕獲」部分是通過使用innerHTML將「L」或「R」寫入頁面的表單區域來完成的。

問題出在這裏，我沒有辦法注意到有人錯過了機會期間按下按鍵。因此，直到表單在流程結束時提交，我纔會記錄所記錄的回覆。

我希望它在10個圖像對的末尾註意到，然後讓用戶重新進行會話，或者注意哪些圖像對被錯過了，並自動重新顯示該對（或多對）。

下面是我得到的代碼，圖像對閃爍並捕獲按鍵。

<script type="text/javascript"> 
var randomPairList = <?php echo $_POST['topicNumber']-1; ?>; 
function imgChoice(imgPair) 
{ 
    var imgDataR = '<input type="hidden" name="'+imgPair+'[<?php echo $_POST['topicNumber']; ?>]" value="r" />'; 
    var imgDataL = '<input type="hidden" name="'+imgPair+'[<?php echo $_POST['topicNumber']; ?>]" value="l" />'; 
    var noData = '<?php $noData = 1; ?>'; 
    $(document).on('keydown', function(event) 
    { 
    if (event.keyCode == 67 || event.keyCode == 37) 
    { 
     document.getElementById(imgPair+'Data').innerHTML = imgDataL; 
     $(document).unbind('keydown'); 
    } 
    if (event.keyCode == 77 || event.keyCode == 39) 
    { 
     document.getElementById(imgPair+'Data').innerHTML = imgDataR; 
     $(document).unbind('keydown'); 
    } 
    }); 
    //div = document.getElementById(imgPair); 
} 

function stopChoice(imgPair) 
{ 
    $(document).unbind('keydown'); 
} 

function flashImages() 
{ 
    i=500; 
    //$('#startTopic').fadeOut(500); 
    setTimeout("document.getElementById('fullpd').style.cursor='none';",50); 
    setTimeout("document.getElementById('fullpd').style.background='#464646';",500); 
    for(x=1;x<imgPairs.length;x++) 
    { 
    setTimeout("document.getElementById('clickSound').play();",i+2000); 
    setTimeout('document.getElementById("'+imgPairs[x]+'").style.display="block";',i+3500) 
    setTimeout('imgChoice("'+imgPairs[x]+'");',i+3495) 
    setTimeout('document.getElementById("'+imgPairs[x]+'").style.display="none";',i+4000) 
    setTimeout('stopChoice("'+imgPairs[x]+'");',i+6000) 
    i=i+4000; 
    } 
    setTimeout("document.getElementById('fullpd').style.background='#eaeaea';",i+1000) 
    setTimeout("document.getElementById('fullpd').style.cursor='default';",i) 
    setTimeout(function() {$('#endTopic').fadeIn(1000);},i+1000); 
} 
</script> 

所以，我想知道如果有或者是保持event.keyCode的簡單計數的方式，使得在結束另一個函數被調用，以確保它總計記錄10個事件，如果沒有重新啓動......或者一種專門跟蹤哪個imagePair被錯過的方法，然後自動重新運行這些對。

感謝， 斯科特

Answer 1

我找到了一種方法來實現我需要什麼...

我添加了一個計數器，記錄關鍵事件的函數中：

var randomPairList = <?php echo $_POST['topicNumber']-1; ?>; 
var choicesMade = 0; 
function imgChoice(imgPair) 
    { 
     var imgDataR = '<input type="hidden" name="'+imgPair+'[<?php echo $_POST['topicNumber']; ?>]" value="r" />'; 
     var imgDataL = '<input type="hidden" name="'+imgPair+'[<?php echo $_POST['topicNumber']; ?>]" value="l" />'; 
     var noData = '<?php $noData = 1; ?>'; 
     $(document).on('keyup', function(event) { 
      if (event.keyCode == 67 || event.keyCode == 37) { 
       document.getElementById(imgPair+'Data').innerHTML = imgDataL; 
       $(document).unbind('keyup'); 
       choicesMade+=1; 
       document.getElementById('choicesMade').innerHTML = choicesMade; 
       } 
      if (event.keyCode == 77 || event.keyCode == 39) { 
       document.getElementById(imgPair+'Data').innerHTML = imgDataR; 
       $(document).unbind('keyup'); 
       choicesMade+=1; 
       document.getElementById('choicesMade').innerHTML = choicesMade; 
      } 
     }); 
} 

function stopChoice(imgPair) 
    { 
     $(document).unbind('keyup'); 
    } 

然後，我改變所顯示的代碼「 endTopic」 div來有它選擇不同的div來顯示，如果沒有達到所需的選項數量：

function flashImages(){ 
    i=500; 
    //$('#startTopic').fadeOut(500); 
    setTimeout("document.getElementById('fullpd').style.cursor='none';",50); 
    setTimeout("document.getElementById('fullpd').style.background='#464646';",500); 

    for(x=1;x<=imgPairs.length-1;x++){ 
     setTimeout("document.getElementById('clickSound').play();",i+2000); 
     setTimeout('document.getElementById("'+imgPairs[x]+'").style.display="block";',i+3500) 
     setTimeout('imgChoice("'+imgPairs[x]+'");',i+3495) 
     setTimeout('document.getElementById("'+imgPairs[x]+'").style.display="none";',i+4000) 
     setTimeout('stopChoice("'+imgPairs[x]+'");',i+6005) 
     i=i+4000; 
     } 
    setTimeout("document.getElementById('fullpd').style.background='#eaeaea';",i+1000) 
    setTimeout("document.getElementById('fullpd').style.cursor='default';",i) 
    setTimeout(function() {if(choicesMade < 10){$('#missedChoices').fadeIn(1000);} else {$('#endTopic').fadeIn(1000);}},i+1000); 
    //setTimeout(function() {$('#endTopic').fadeIn(1000);},i+1000); 
} 

然後，在‘missedChoices’分區，用戶給出的消息他們錯過了一些迴應，並且該按鈕可用於'返回'。

到目前爲止，它似乎工作正常！ :-)

Answer 2

使用KEYUP代替KEYDOWN。

它會捕獲所有關鍵筆劃，並且不會像您所描述的那樣錯過任何關鍵筆劃。