Hi All,
I have developed some code which counts the words in a text box (as apposed to the count of characters). When the maximum number is reached (eg. 50) it will disable the next button and also disable any typing except for the delete key, copy / cut / paste operations, undo and the cursor keys. This works as expected in Windows 10 Chrome / Edge but not on an Android Chrome Browser. I've read a few articles online about android being a problem but not managed to find a solution. It's something to do with event.preventDefault(). My code is below and I am hoping that I've done the hard bit and it's just a simple step to make it operate as expected on an Android.
Thanks in advance
Rod Pestell
Qualtrics.SurveyEngine.addOnReady(function()
{
//code to report number of word and limit to maxwords (or the variable so that it's easier to change)
// helpful source: https://community.qualtrics.com/XMcommunity/discussion/2337/limit-the-number-of-words-in-the-text-box#:~:text=Put%20maximum%20characters%20to%2075.
let maxwords = 50;
var that=this.questionId;
jQuery("
Words remaining: " + maxwords + "
").insertAfter("#"+that +" .QuestionText");var numOfWords = 0;
jQuery("#count").css("padding-left","15px");
//this prevents copy and pasting which I think gets round the word count limit
//jQuery("#"+that +" .InputText").on("cut copy paste",function(e) {
//e.preventDefault();
// });
//helpful source: https://stackoverflow.com/questions/14990886/event-handler-for-input-delete-undo
//this helped me to allow copy and paste ctrl+key and other functions
jQuery("#"+that +" .InputText").on("keydown keyup input propertychange paste change",function(e) {
numOfWords = jQuery("#"+that +" .InputText").val().replace(/^[\\s,.;]+/, "").replace(/[\\s,.;]+$/, "").split(/[\\s,.;]+/).length;
//console.log(jQuery("#"+that +" .InputText").val().length);
//this handles the issue that the count value doesn't go back to the max count if all text has been deleted
if(jQuery("#"+that +" .InputText").val().length == 0){
numOfWords = 0;
}
jQuery("#count").text("Words remaining: "+(maxwords - parseInt(numOfWords)));
jQuery("#count").css("padding-left","15px");
// handle select all ctrl+a
// https://stackoverflow.com/questions/16006583/capturing-ctrlz-key-combination-in-javascript
// if a object isn't defined in the function, (eg. e) I think then you use 'event.'
if (e.ctrlKey && e.key === 'a' || e.ctrlKey && e.key === 'x') {
console.log("ctrl+a or x detected, " + e.which)
//jQuery("#"+that +" .InputText").SelectAll(); // don't think this syntax is correct
// but you don't actually need to do a selectall command as it's native. You just needed to include the detection of the ctrl+a to allow select all to work
}
//when the number of words exceeds this number, it's no longer possible to type anyting in to the box
if( numOfWords > maxwords ){
//to allow delete or backspace still to work if you exceed maxwords
if (! (e.which == 8|| e.which == 46 || e.which == 37 || e.which == 38 || e.which == 39 || e.which == 40 || e.ctrlKey && e.key === 'a' || e.ctrlKey && e.key === 'x' || e.ctrlKey && e.key === 'z')){
e.preventDefault();
}
else {
console.log(e.which);
}
jQuery('#NextButton').prop('disabled', true);
}
else {
jQuery('#NextButton').prop('disabled', false);
}
});
// second listening event to cater for slightly different keystrokes
jQuery("#"+that +" .InputText").keypress(function(e){
numOfWords = jQuery("#"+that +" .InputText").val().replace(/^[\\s,.;]+/, "").replace(/[\\s,.;]+$/, "").split(/[\\s,.;]+/).length;
//console.log(jQuery("#"+that +" .InputText").val().length);
//this handles the issue that the value doesn't go back to maxwords if all text has been deleted
if(jQuery("#"+that +" .InputText").val().length == 0){
numOfWords = 0;
}
jQuery("#count").text("Words remaining: "+(maxwords - parseInt(numOfWords)));
jQuery("#count").css("padding-left","15px");
//when the number of words exceeds this number, it's no longer possible to type anyting in to the box
if( numOfWords > maxwords ){
//to allow delete or backspace still to work if you exceed maxwords
if (! (e.which == 8|| e.which == 46 || e.which == 37 || e.which == 38 || e.which == 39 || e.which == 40 || e.ctrlKey && e.key === 'a' || e.ctrlKey && e.key === 'x' || e.ctrlKey && e.key === 'z')){
e.preventDefault();
}
else {
console.log(e.which);
}
jQuery('#NextButton').prop('disabled', true);
}
else {
jQuery('#NextButton').prop('disabled', false);
}
});
});