Question

In Firefox this section of the code never seems to return true. Yet it works perfectly well in Google Chrome

if(restrictCharacters(this, event, digitsOnly)==true)

What should be happening is that if the user inputs a number from 1 to 5 in the input box with the ID E1Rating the function returns true and runs the code nested underneath. But in Firefox nothing happens after a participant enters the number.

I stripped the code down to the part that’s not working in Firefox. So you can see how it’s being used.

document.getElementById("E1TimeStart").value = startTime;       
$('#E1Rating').keyup(function() {
    if(restrictCharacters(this, event, digitsOnly)==true){                  
        clearTimeout(mytimeout);                                                                        
        var rateTime = new Date().getTime();                
        $('#E1Rate').hide();                                                
        document.getElementById("E1TimeEnd").value = rateTime;              
        PrepareBox2();                                                      
    }
    else{
        //Do nothing and wait for the timeout
    }
});

};

This is the restrictCharacters function. I know it works since again it works in Chrome. Also the function works in Firefox if you use it outside of the if == true function. My suspicion from searching and trying things is that it might be the event reference in the (this, event, digitsOnly). But if that’s the case what is it specifically?

/* Purpose: Code will restrict false until it detects the numbers 1 through 5 */
/* Code Source: originally from qodo.co.uk */
// create as many regular expressions here as you need:
var digitsOnly = /[1-5]/g;

function restrictCharacters(myfield, e, restrictionType) {
    if (!e) var e = window.event
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
    var character = String.fromCharCode(code);

    // if they pressed esc... remove focus from field...
    if (code==27) { this.blur(); return false; }

    // ignore if they are press other keys
    // strange because code: 39 is the down key AND ' key...
    // and DEL also equals .
    if (!e.ctrlKey && code!=9 && code!=8 && code!=36 && code!=37 && code!=38 && (code!=39 || (code==39 && character=="'")) && code!=40) {
        if (character.match(restrictionType)) {
            return true;
        } else {
            return false;
        }

    }
}

Answer 1

You have to define event as a function parameter. Google Chrome and IE support the non-standard global event property, which refers to the latest event object.

$('#E1Rating').keyup(function(event) { //<--
    if(restrictCharacters(this, event, digitsOnly)){

Note: if (.. == true) can safely be replaced with if (...), because any expression which is equal to true, is also true as an assertion.