Form Field Character Limit Placeholder & Counter in NSTE

Hi,

Here’s ​@Deepak function adapted for NSTE. In addition, limits are specified individually at the top.

Qualtrics.SurveyEngine.addOnload(function () {

    var limits = [50, 0, 200]; // one per input, in order. 0 means no limit.
    var inputs = document.querySelectorAll("#question-" + this.questionId + " .choice-te-wrapper .text-input");

    inputs.forEach(function (input, i) {

        var maxChars = limits[i] || 0;
        if (maxChars === 0) return;

        input.placeholder = maxChars + " character limit.";

        var display = document.createElement("div");
        display.style.cssText = "visibility:hidden; padding-top:4px;";
        display.innerHTML = "Characters remaining: <span class='charCount'>" + maxChars + "</span>";
        input.closest(".choice-te-wrapper").insertAdjacentElement("afterend", display);

        input.addEventListener("input", function () {
            var remaining = maxChars - input.value.length;
            if (remaining < 0) {
                input.value = input.value.substring(0, maxChars);
                remaining = 0;
            }
            display.style.visibility = input.value.length > 0 ? "visible" : "hidden";
            display.querySelector(".charCount").textContent = remaining;
        });
    });
});

​@vgayraud Hi! Would you be able to help adjust this for an open ended question (not form field)? Thanks!!

Hi ​@Maddie 

This should work on both question types.

Qualtrics.SurveyEngine.addOnload(function () {
    var limits = [50]; // one per input, in order. 0 means no limit.
    var inputs = document.querySelectorAll("#question-" + this.questionId + " .text-input");
    inputs.forEach(function (input, i) {
        var maxChars = limits[i] || 0;
        if (maxChars === 0) return;

        input.placeholder = maxChars + " character limit.";

        var anchor = input.closest(".choice-te-wrapper") || input.closest(".resize-wrapper");
        if (!anchor) return;

        var display = document.createElement("div");
        display.style.cssText = "visibility:hidden; padding-top:4px;";
        display.innerHTML = "Characters remaining: <span class='charCount'>" + maxChars + "</span>";
        anchor.insertAdjacentElement("afterend", display);

        input.addEventListener("input", function () {
            var remaining = maxChars - input.value.length;
            if (remaining < 0) {
                input.value = input.value.substring(0, maxChars);
                remaining = 0;
            }
            display.style.visibility = input.value.length > 0 ? "visible" : "hidden";
            display.querySelector(".charCount").textContent = remaining;
        });
    });
});

Hi ​@vgayraud thank you so much for your reply! This doesn’t seem to be working for me. I am looking to just have text in the textbox and don’t need the countdown. 

I used this method in the past, but with the NSTE it doesn't work.

Any guidance would be greatly appreciated!

​@vgayraud THANK YOU SO MUCH!! I really appreciate the help!