JQuery/JavaScript键盘事件

JQuery / JavaScript Keyboard event

本文关键字:事件 键盘 JavaScript JQuery      更新时间:2023-09-26

我有一个文本区的打字速度测试,我有一段被分成跨度。每次用户点击空格时,都会突出显示下一个跨度。然后我将文本区域val()分开,并在最后对两者进行比较。除了我无法让回车键做我想做的事情之外,我什么都能做。我需要它像空格键一样(在后台),充当屏幕上的回车键。

$(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';
    }
});

});

试试这个:

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

@james-感谢您的帮助。我找到了思考这个问题的更好方法。我没有更改回车键操作,而是将split函数更改为var typedWords=typed.split(/[''r''n]+/);