JQuery/JavaScript 키보드 이벤트

Question

나는 텍스트 영역으로 타이핑 속도 테스트를하고, 단락을 스팬으로 분할했습니다. 사용자가 공간에 도달 할 때마다 다음 범위를 강조 표시합니다. 그런 다음 텍스트 영역 val()을 분리하고 끝에있는 두 개를 비교합니다. 나는 내가 원하는 것을하기 위해 엔터 키를 얻을 수 없다는 것 외에는 모든 것이 작동한다. 스페이스 바 (백그라운드에서)처럼 행동하고 화면에 Enter 키 역할을해야합니다.

$(function() { 

//APPEARANCE 
$('#error').hide(); 
$('#oldTextOne').hide(); 
$('#oldTextTwo').hide(); 
$('#oldTextThree').hide(); 
$('#oldTextFour').hide(); 
$('#oldTextFive').hide(); 
$('.linkBox').hover(function() { 
    $(this).removeClass('linkBox').addClass('linkHover'); 
}, function() { 
    $(this).removeClass('linkHover').addClass('linkBox'); 
}); 



//FUNCTIONALITY VARIABLES 
var min = '5'; 
var sec = '00'; 
var realSec = 0; 
var errorTest = "hasn't started yet"; 
var oldTextVal; 
var para; 

// PICK A RANDOM PARAGRAPH 



function pickRandom() { 

    var date = new Date(); 
    date = date.getTime(); 
    date += ''; 
    var dateSplit = date.split(''); 
    var temp = dateSplit.length - 1; 
    var picker = dateSplit[temp]; 

    if (picker === '0' || picker === '1') { 
     para = $('#oldTextOne').text(); 
    } 

    else if (picker === '2' || picker === '3') { 
     para = $('#oldTextTwo').text(); 
    } 

    else if (picker === '4' || picker === '5') { 
     para = $('#oldTextThree').text(); 
    } 

    else if (picker === '6' || picker === '7') { 
     para = $('#oldTextFour').text(); 
    } 

    else { 
     para = $('#oldTextFive').text(); 
    } 

    var splitPara = para.split(' '); 

    for (i in splitPara) { 
     $('#oldTextBox').append('<span id="pw' + i + '">' + splitPara[i] + '</span> '); 
    } 

} 

pickRandom(); 

//FUNCTION FOR TIMER 

//APPEARANCE 
function show() { 
    $('#timer').text(min + ' : ' + sec); 
} 
show(); 

//COUNT-DOWN 
var count = function() { 
    sec = +sec - 1; 
    sec += ''; 
    realSec++; 

    if (+sec === -1) { 
     sec = '59'; 
     min -= 1; 
     min += ''; 
    } 

    if (sec.length === 1) { 
     sec = '0' + sec; 
    } 

    show(); 

    if (sec === '00' && min === '0') { 
     clearInterval(run); 
     checkIt(); 
    } 

}; 

// TYPE THE TEXT INTO #TYPEDTEXTBOX 

$('#pw0').addClass('green'); 
var lastLetter; 

$('#typedTextBox').focus().keypress(function() { 
    if (errorTest === "hasn't started yet") { 
     errorTest = 'running'; 
     run = setInterval(count, 1000); 
    } 



//STOP ERRORS FROM PEOPLE HITTING SPACE BAR TWICE IN A ROW !!NOT WORKING IN IE8 
    var thisLetter = event.which; 

    if (lastLetter === 32 && event.which === 32) { 
     event.preventDefault(); 
    } 
    lastLetter = thisLetter; 

}).keyup(function() { 

//STOP ERRORS FROM BACKSPACE NOT REGISTERING WITH KEYPRESS FUNCTION 
    if (event.which === 8) { 
     lastLetter = 8; 
    } 

    if (event.which === 13) { 

       ????????????????????????????????????????????? 

    } 


//SPLIT THE TYPED WORDS INTO AN ARRAY TO MATCH THE OLD TXT SPANS (TO HIGHLIGHT THE CURRENT WORD IN OLDTXT) 
    var typedWords = $(this).val().split(' '); 
    var temp = typedWords.length - 1; 
    var oldTemp = temp - 1; 
    var stopErrors = temp + 1; 

    $('span:nth(' + temp + ')').addClass('green'); 
    $('span:nth(' + oldTemp + ')').removeClass('green'); 
    $('span:nth(' + stopErrors + ')').removeClass('green'); 

//SCROLL 
    if (typedWords.length < 50) { 
     return; 
    } 

    else if (typedWords.length > 50 && typedWords.length < 100) { 
     $('#oldTextBox').scrollTop(30); 
    } 

    else if (typedWords.length > 100 && typedWords.length < 150) { 
     $('#oldTextBox').scrollTop(60); 
    } 

    else if (typedWords.length > 150 && typedWords.length < 200) { 
     $('#oldTextBox').scrollTop(90); 
    } 

    else if (typedWords.length > 200) { 
     $('#oldTextBox').scrollTop(120); 
    } 

//KEEP FOCUS IN THE TYPING AREA 
}).blur(function() { 
    if (errorTest !== 'done') { 
     $(this).focus(); 
    } 
}); 

//COMPARE 
//MAKE AN ARRAY OF THE OLDTEXT 

var oldWords = para.split(' '); 

//FUNCTION TO DISPLAY RESULTS 

var checkIt = function() { 
    errorTest = 'done'; 
    var correct = 0; 
    var typed = $('#typedTextBox').val(); 
    var typedWords = typed.split(' '); 
    $('#typedTextBox').blur(); 

    for (i = 0; i < typedWords.length; i++) { 
     if (typedWords[i] === oldWords[i]) { 
      correct += 1; 
     } 
    } 

    var errors = typedWords.length - correct; 
    var epm = (errors/realSec) * 60; 
    var wpm = Math.round((($('#typedTextBox').val().length/5)/realSec) * 60); 
    var realWpm = Math.round(wpm - epm); 


//SHOW RESULTS 

    $('#oldTextBox').html('<br><span id="finalOne">WPM : <strong>' + realWpm + ' </strong></span><span class="small">(error adjusted)</span><br><br><span id="finalTwo">You made ' + errors + ' errors </span><br><span id="finalThree">Total character count of ' + $('#typedTextBox').val().length + '</span><br><span id="finalFour">Gross WPM : ' + wpm + '</span>'); 
}; 

//STOP BUTTON APPEARANCE AND FUNCTIONALITY 

$('#stop').mouseover(function() { 
     $(this).addClass('stopHover'); 

    }).mouseout(function() { 
     $(this).removeClass('stopHover'); 

    }).click(function() { 

    if (errorTest === 'running') { 
     checkIt(); 
     clearInterval(run); 
     errorTest = 'done'; 
    } 
}); 

});

Answer 1

이 시도 :

//ENTER KEY 
    if (event.which === 13) { 
     //event.stopPropagation(); or 
     event.preventDefault(); 
     //simulate spacebar 
     $(window).trigger({type: 'keypress', which: 32, keyCode: 32}); 
    } 

Answer 2

@ 제임스를 - 도움을 주셔서 감사합니다. 문제에 대해 더 나은 생각을 찾았습니다. Enter 키 동작을 변경하는 대신 split 함수를 var typedWords = typed.split (/ [\ r \ n] + /)로 변경했습니다.