Make typed words disappear with space bar press | XM Community
Skip to main content

Hello there,
I am hoping someone might have some code I could embed to make text disappear as participants type. When participants are typing into a text box, I would like each word the participant types to disappear when the participant hits the space bar. Can anyone point me in the right direction for how to do this?

MadeleineG
Not sure, why you are removing text. You can eliminate the use of a space bar instead of making it empty by using the code below, which I had included in the previous thread, just replace the last line.
Qualtrics.SurveyEngine.addOnload(function() {
var qid = this.questionId;
document.onkeydown = function(event) {
console.log('keydown',event);
if (event.which == 32) {
return false;
}
}
});
Or
if you want to remove all items on space bar click you can use the below code just adding one line.
Qualtrics.SurveyEngine.addOnload(function() {
var qid = this.questionId;
document.onkeydown = function(event) {
console.log('keydown',event);
if (event.which == 32) {
document.getElementById('QR~'+qid+'').value="";
return false;
}
}
});
Hope it helps!


Deepak Thank you SO much! The second code is exactly what I am after EXCEPT I need the responses to be recorded. So I need the text to disappear word by word for the participant but the responses to still be recorded when I download the data. Any idea how I can fix that aspect in the code?


MadeleineG
I am afraid if I understand this, could you give an example?
As, each word will become a word after a space bar is hit and if a space bar is hit we are making it disappear. Hence, there will never be 2 words at once to do a word by word delete.
Can you please elaborate??


Deepak Thanks for your response. Basically I am wanting the words to disappear only for the participant, but for the words they typed to be saved/recorded (in the "back end" so to speak, so that the researcher can download what has been written). So in essence the space bar is doing two things 1) recording the response and 2) resetting the text box to be empty.


MadeleineG
You can use the below code and include in JS, you need to create an embedded data "txtval" in survey flow. Where all the responses will be recorded, as we are emptying the actual text box.
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var qid=this.questionId;
document.onkeydown = function(event) {
if (event.which == 32) {
    var txtVal = jQuery("inputuid='QR\\~"+qid+"']").val();
Qualtrics.SurveyEngine.setEmbeddedData( "txtval",  txtVal);
document.getElementById('QR~'+qid+'').value="";
return false;
}
}
});
Also, make sure of the below limitation as we are storing it in embedded data:
Each value of an embedded data field should never exceed 20KB (20,000 bytes). The amount of bytes in a given character depends on the character. For example, characters in English are 1 byte, while characters in other languages such as Chinese or Hebrew can take up multiple bytes per character. If you are unsure if you may hit this limit, use a byte counter to see how many bytes make up your embedded data value.
Hope it helps!


Leave a Reply