How to automatically insert commas into text entry box

[noa-no-h]

I'm using jsPsychSurvey to ask people to estimate the population of various countries. I would like commas to be automatically inserted into their answers as they type to help them read 2,000,000 vs 20,000,000 for example. Since jsPsychSurvey is a wrapper for SurveyJS, I looked at how to do this in SurveyJS and found https://surveyjs.io/form-library/examples/masked-input-fields but I don't have a js framework set up for my experiment (which this masking appears to require) and I don't know what would be best practice around this in jsPsych. All advice would be appreciated! (For context, I have some experience with jsPsych but only the bare minimum with js frameworks.) Here's the timeline element as an example:

var first_estimate = {
    timeline: [{
        type: jsPsychSurvey,
        survey_json: {
            showQuestionNumbers: false,
            focusFirstQuestionAutomatic: true,
            pages: [
                {
                    name: "page1",
                    elements: [
                        {
                            type: "text",
                            name: "countryEstimate",
                            title: function() {
                                country_display = current_country.replace(/_/g, ' ');
                                return "How many people live in " + country_display + "?";
                            },
                            isRequired: true,
                            inputType: "number",
                            placeHolder: "Enter your estimate here",
                            rows: 1,
                            columns: 20,
                        }
                    ]
                }
            ]
        },
    randomize_order: false
};

[jodeleeuw]

Hi @noa-no-h

I haven't tried this yet, but the masked input field might work as is? This is the relevant bit of the demo from the surveyjs site. What happens if you add the maskType field to your json description?

 {
              "type": "text",
              "name": "decimal",
              "title": "Decimal:",
              "maskType": "numeric",
              "maskSettings": {
                "precision": 1
              }
            },

[noa-no-h]

Thank you, @jodeleeuw !
When I try that, something strange happens: when I type '1' into the box, it comes out as '11'. When I type '12' it comes out as '2112'. And it only allows 4 characters at most.

(here's the code:)

elements: [
                        {
                            type: "text",
                            name: "countryEstimate",
                            maskType: "numeric",
                            maskSettings: {
                                "precision": 1
                              },
                            title: function() {
                                country_display = current_country.replace(/_/g, ' ');
                                return "How many people live in " + country_display + "?";
                            },
                            isRequired: true,
                            inputType: "number",
                            placeHolder: "Enter your estimate here",
                            rows: 1,
                            columns: 20,
                        }
                    ]

[jodeleeuw]

Tagging @becky-gilbert in case she has ideas and a spare moment 😄

[becky-gilbert]

Great question @noa-no-h, and sorry that this isn't clear from the survey plugin docs/examples.

Josh is right that you can use the SurveyJS masked input to do this. Using maskType: "numeric" automatically gives you the commas for the thousands separator. And adding "precision": 0 in the maskSettings prevents people from entering decimals. See here for more info and examples for the masked input: https://surveyjs.io/form-library/examples/masked-input-fields/documentation.

The reason why Josh's suggestion isn't working is that you have to remove the inputType: "number" parameter because that is what is producing the weird behavior you're seeing (it causes an error in the SurveyJS core package). You'll see that there's no inputType: "number" setting in the survey plugin demo for masked input (last example on the survey plugin docs page) or in the SurveyJS examples for text entry questions with numeric input masks.

So try this (no inputType: "number"):

elements: [
  {
    type: "text",
    name: "countryEstimate",
    title: function() {
      country_display = current_country.replace(/_/g, ' ');
      return "How many people live in " + country_display + "?";
    },
    isRequired: true,
    placeHolder: "Enter your estimate here",
    maskType: "numeric",
    maskSettings: {
      precision: 0
    }
  }
]

Also, one thing I noticed is that your placeholder text is being cut off:

This is because the text input element is ignoring your rows/cols values, since those are for textarea elements (long comment boxes) rather than input elements (single line text box). With the single-line text input box that you're using, you can use the size parameter instead, which sets the width as a number of characters. Here's what it looks like with size: 25:

Another option is set the width of the input element to 100%, which will make it the same width as the question box. You can do that by inserting some CSS that grabs the input element inside your question div, which you can identify using your question's "name" value as the element's "data-name":

<style>
  div[data-name="countryEstimate"] input {
    width: 100%;
  }
</style>

Hope that helps! Let us know if you have more questions or run into problems.

[becky-gilbert]

P.s. @jodeleeuw thanks for tagging me! I'm struggling to keep up with GH notifications, so you/anyone should feel free to tag me if there's anything in particular that I can help with 🙂

[noa-no-h]

Thank you so much for this! I wonder where I got that rogue inputType: "number" from! My suspicion is it snuck in during an earlier round of debugging something else with chatgpt so let this be a lesson for me to to recheck the documentation in the future after using something from chatgpt to make sure it isn't just inserting random things!

[becky-gilbert]

Totally understandable! I'm surprised that it causes an error and weird behavior, instead of just being ignored (ideally this is something the SurveyJS team would fix!). Anyway, glad it's working now 🙂