For some reason, in Firefox, this section of the code never returns true. However, it works perfectly fine in Google Chrome.
if(restrictCharacters(this, event, digitsOnly)==true)
The expected behavior is that if a user inputs a number from 1 to 5 in the input box with the ID E1Rating, the function should return true and execute the nested code below. But in Firefox, nothing happens after a participant enters a number.
I have isolated the problematic part of the code to show you how it's being utilized.
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
}
});
};
Here is the restrictCharacters function. It has been tested and confirmed to work in Chrome. Interestingly, it also works in Firefox when used outside of the if == true block. I suspect that the issue might be related to the event reference in (this, event, digitsOnly). But I'm not entirely sure what specifically could be causing it.
/* 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;
}
}
}