Solved
Default text in a response that disappears when clicked on
How do we set default text that can disappear when a text box is clicked on? A client has a verbatim question and in this box needs to provide some instruction about not entering personal details here. I have set a default text response but the customer has to manually delete this before providing their response and also can submit this default text as a response. I need something that works in the same way as the email and name fields in the attached image, an example is provided to give you an idea of the format required, but when you click in the text disappears. How can this be done in the survey?
!
Best answer by TomG
Use JavaScript to add a placeholder attribute to the input element.
```
jQuery("#"+this.questionId+" .InputText").attr("placeholder", "My placeholder text");
```
View original
+27Use JavaScript to add a placeholder attribute to the input element.
```
jQuery("#"+this.questionId+" .InputText").attr("placeholder", "My placeholder text");
```
+1> @TomG said:
> Use JavaScript to add a placeholder attribute to the input element.
> ```
> jQuery("#"+this.questionId+" .InputText").attr("placeholder", "My placeholder text");
> ```
>
Can this also work in the Form text type? because when i used it it shows me First name in all the fields.
+27> @khalid said:
>
> Can this also work in the Form text type? because when i used it it shows me First name in all the fields.
That line of JS adds the placeholder to all the elements in the question with a class of InputText. For a text form, you'd need to modify it to add specific placeholders to specific fields.
+1Thanks Tom, i will try to find out the specific placeholder for each field.
I had the same question. By adapting the info TomG sent, I was able to change all of my textarea default text with a jQuery loop in the theme footer like this. If each of your textareas need a different message, then (of course) this won't work.
<script>
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("textarea").each(function() {
jQuery(this).attr("placeholder","Enter your comments here.");
});
});
</script>
+27@red - You shouldn't need a loop...that's the beauty of jQuery. This should work:
```
<script>
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("textarea").attr("placeholder","Enter your comments here.");
});
</script>
```
+2@TomG , thank you for the code. I'm still at an early level of qualtrics and can't figure out how to implement your solution for disappearing default text/placeholder text ("attribute" and "input" haven't turned up any useful resources in the community) . Are you able to point to any more resources showing the step-by-step process? Thank you!
!
+27> @EllenW said:
> @TomG , thank you for the code. I'm still at an early level of qualtrics and can't figure out how to implement your solution for disappearing default text/placeholder text ("attribute" and "input" haven't turned up any useful resources in the community) . Are you able to point to any more resources showing the step-by-step process? Thank you!
>
> !
>
Your image doesn't have a JS icon on the left, which means you haven't added the JavaScript. Click on the cog, select Add JavaScript, and paste the JS from the accepted answer above into the addOnload function.
>
Your image doesn't have a JS icon on the left, which means you haven't added the JavaScript. Click on the cog, select Add JavaScript, and paste the JS from the accepted answer above into the addOnload function.1 person likes this
Hi,
Can I apply this same coding to a multiple choice question with an "other" option with text entry? Screenshot is attached below.
+27> @TMartin53 said:
> Hi,
>
> Can I apply this same coding to a multiple choice question with an "other" option with text entry? Screenshot is attached below.
Yes.
@rwh - This worked for me:
jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please Explain.");
@TomG Hey Tom,
jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please Explain.");
I tried this code for my case but doesn't seem to be working. It is placing a placeholder text but it disappears when a customer starts typing in the box. My requirement is the default text should disappear when the customer clicks in the box. I tried doing it with on-click/onfocus functionality but it didn't help. Can you please help?
+27> @Sugra said:
> @TomG Hey Tom,
> jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please Explain.");
> I tried this code for my case but doesn't seem to be working. It is placing a placeholder text but it disappears when a customer starts typing in the box. My requirement is the default text should disappear when the customer clicks in the box. I tried doing it with on-click/onfocus functionality but it didn't help. Can you please help?
That's the way placeholders work. You can use a focus event to remove the placeholder attribute to get the desired functionality.
@TomG Thank you for responding Tom
I tried below code for focus event but doesn't seem to be working.
Can you help me if I am doing anything wrong here?
{
/*Place your JavaScript here to run when the page loads*/
jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please Explain.");
jQuery("#" + this.questionId + " .InputText").focus(function(){
jQuery("#"+this.questionId+" .InputText").removeAttr("placeholder", "Please Explain.");
});
});
+27> @Sugra said:
> @TomG Thank you for responding Tom
> I tried below code for focus event but doesn't seem to be working.
> Can you help me if I am doing anything wrong here?
> {
> /*Place your JavaScript here to run when the page loads*/
> jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please Explain.");
> jQuery("#" + this.questionId + " .InputText").focus(function(){
> jQuery("#"+this.questionId+" .InputText").removeAttr("placeholder", "Please Explain.");
> });
> });
Your removeAttr syntax is wrong. Change to .removeAttr("placeholder");
@TomG This is still not working. I tried below code as well but no help
jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please Explain.").onfocus="this.placeholder = ''";
TomG
Hi Tom thanks for your guidance, need your help. Can you show how to the text comment in multiple text boxes?
+27@Fahad,
The code provided will add a placeholder to all the textarea elements on the page. Change the jQuery selector as needed.
TomG : Hi Tom, it works with a single text box, however doesn't work with multiple text boxes in the same question
+27TomG : Hi Tom, it works with a single text box, however doesn't work with multiple text boxes in the same question
I forgot .attr() only works on the 1st element in the set, use .each():
jQuery("#"+this.questionId+" .InputText").each(function() {
jQuery(this).attr("placeholder", "My placeholder text");
});
TomG
Thanks :)... will try.
Another question on the topic of changing logo. I already have existing static template with everything (color, format) in place. However since our logo changed this year someone had put in placed Custom CSS code for the new logo while everything (formatting and color) remains same. I mistakenly removed the Custom CSS code.
Can you help me how to write the custom CSS code?
TomG: Sorry for asking so many questions i am very new to Qualtrics.
I found the below link used in one of the earlier study, what I understand is that the logo is being removed and replaced with background in url. Now if I need to do the same how do I develop the url?
Please help, appreciate it
html .Skin #Logo {display: none;}
#SurveyEngineBody {
background: url(https://etihad.eu.qualtrics.com/CP/Graphic.php?IM=IM_86xvhpypazMDskl) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.