Urgent: Javascript for numpad keyboard doesn't work in Simple layout

Thank you for the speedy response!

I ended up taking some of your code and using my brother’s inputs (he shared pure JS version of your code). That way I didn’t have to put anything in the header, reducing additional script calls.

This is the code I used for each question:

try {
    document.querySelectorAll("#question-"+this.questionId+" .text-input").forEach(el => {
        el.setAttribute("type", "tel");
    });
} catch (err) { console.log(err); }	

It works!

I’m having a similar problem with the new Simple layout.

I had this custom code to transform a text field into a drop-down but it seems like the new Simple layout is not accepting the information parsed in the field from a drop down.

Any clue what may need to be amended in the code?
 

Qualtrics.SurveyEngine.addOnload(function() {

    // Define German title options


    var options = ["--- Bitte wählen Sie eine ---", "Herr", "Frau", "Dr.", "Prof.", "Prof. Dr.", "Dipl.-Ing.", "Dipl.-Kfm.", "Magister", "Bachelor", "Master"];

    // Locate the input field by its specific ID


    var field = document.getElementById("form-text-input-QID5-25");
    if (field) {

        // Create a select element


        var select = document.createElement("select");
        select.id = field.id;
        select.name = field.name;

        // Set various styles for the select element

        select.style.width = "31.25rem"; // Set width to 31.25rem
        select.style.height = "3.125rem"; // Set height to 35px (or as desired)
        select.style.border = "0.0625rem solid"; // Set border thickness to 0.0625rem solid
        select.style.padding = "1rem"; // Add padding of 1rem
        select.style.borderRadius = "0.25rem"; // Set border-radius to 0.25rem
        select.style.lineHeight = "1.375"; // Set line-height to 1.375
        select.style.marginRight = "0.625rem"; // Add margin-right of 0.625rem
        select.style.fontFamily = 'var(--font-family, "72", "Helvetica Neue", Helvetica, Arial, sans-serif)'; // Set font-family
        select.style.fontSize = 'var(--answer-text-size, 1rem)'; // Set font-size to 1rem or variable

        // Populate the select element with options

 options.forEach(function(optionText) {
            var option = document.createElement("option");
            option.value = optionText;
            option.text = optionText;
            select.appendChild(option);
        });

        // Insert the select element before the original input field

        field.parentNode.insertBefore(select, field);

        // Hide the original input field

field.style.display = "none";

        // Update the hidden input field's value when the dropdown selection changes

        select.addEventListener("change", function() {
            field.value = select.value;
        });
    }
});