Form Field - Character Limit | XM Community
Skip to main content
Solved

Form Field - Character Limit

  • March 25, 2024
  • 5 replies
  • 159 views
P
Level 5 ●●●●●
Forum|alt.badge.img+5

Hi Everyone

I am using this code successfully in an essay text box.

Qualtrics.SurveyEngine.addOnload(function()
{

jQuery("#"+this.questionId+" .InputText").attr("placeholder", "500 character limit.");
jQuery("#"+this.questionId+"-RemainingChars").css({"color":"#8c8c8c","font-size":"15px","visibility":"collapse"});
jQuery("#"+this.questionId+"-RemainingChars span").css({"visibility":"visible","float":"left"});

Which gives this me this.

How can I do the exact same but for a form field question with x2 fields?

 

Thanks :)

Best answer by Deepak

@parkie_0007 

Qualtrics.SurveyEngine.addOnload(function() {
    var maxChars = 500;
    jQuery("#" + this.questionId + " .InputText").eq(0).attr("placeholder", "500 character limit.").each(function() {
        var input = jQuery(this), 
            display = jQuery("<div style='font-size:15px; color:#8c8c8c; visibility:hidden;'>Characters remaining: <span class='charCount'>" + maxChars + "</span></div>").insertAfter(input);

        input.on("input", function() {
            var remainingChars = maxChars - this.value.length;
            if (remainingChars < 0) {
                this.value = this.value.substr(0, maxChars);
                remainingChars = 0;
            }

            if (this.value.length > 0) {
                display.css('visibility', 'visible');
            } else {
                display.css('visibility', 'hidden');
            }

            display.find(".charCount").text(remainingChars);
        });
    });
});

 

5 replies

Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • Deepak
  • 1555 replies
  • March 25, 2024

Hi @parkie_0007 ,

Try below code, it should work for form field.
 

Qualtrics.SurveyEngine.addOnload(function() {
    var maxChars = 500;
    jQuery("#" + this.questionId + " .InputText").attr("placeholder", "500 character limit.").each(function() {
        var input = jQuery(this), display = jQuery("<div style='font-size:0.8em;'>Characters remaining: <span class='charCount'>" + maxChars + "</span></div>").insertAfter(input);
        input.on("input", function() {
            var remainingChars = maxChars - this.value.length;
            if (remainingChars < 0) {
                this.value = this.value.substr(0, maxChars);
                remainingChars = 0;
            }
            display.find(".charCount").text(remainingChars);
        });
    });
});

 

P
Level 5 ●●●●●
Forum|alt.badge.img+5
  • parkie_0007
  • Author
  • Level 5 ●●●●●
  • 157 replies
  • March 25, 2024

Thanks @Deepak !

Really helpful!

  • How would I make the colour 8c8c8c?
  • How would I make the font-size 15px?
  • How would I show the remaining characters only after the 1st character is inputted.

My form question has x2 fields.

  • How would I make this applicable just for the 1st field?

Thanks! 🙏🏻

Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • Deepak
  • 1555 replies
  • Answer
  • March 25, 2024

@parkie_0007 

Qualtrics.SurveyEngine.addOnload(function() {
    var maxChars = 500;
    jQuery("#" + this.questionId + " .InputText").eq(0).attr("placeholder", "500 character limit.").each(function() {
        var input = jQuery(this), 
            display = jQuery("<div style='font-size:15px; color:#8c8c8c; visibility:hidden;'>Characters remaining: <span class='charCount'>" + maxChars + "</span></div>").insertAfter(input);

        input.on("input", function() {
            var remainingChars = maxChars - this.value.length;
            if (remainingChars < 0) {
                this.value = this.value.substr(0, maxChars);
                remainingChars = 0;
            }

            if (this.value.length > 0) {
                display.css('visibility', 'visible');
            } else {
                display.css('visibility', 'hidden');
            }

            display.find(".charCount").text(remainingChars);
        });
    });
});

 

P
Level 5 ●●●●●
Forum|alt.badge.img+5
  • parkie_0007
  • Author
  • Level 5 ●●●●●
  • 157 replies
  • March 25, 2024

Amazing, thanks :)

P
Level 5 ●●●●●
Forum|alt.badge.img+5
  • parkie_0007
  • Author
  • Level 5 ●●●●●
  • 157 replies
  • March 25, 2024

Sorry! @Deepak !

What if I wanted this again for the second field in the form?

Thanks :)


Terms & ConditionsAccessibility statement