Skip to main content
corbinm75746610
corbinm75746610
Inspiring
September 19, 2017
Answered

Text entry box code - destroys leading zeros

  • September 19, 2017
  • 3 replies
  • 1211 views

Hello,

I wanted to open a discussion about an issue I was asked to step in and deal with regarding how text entries work in Captivate. From everything we could find, a text entry box, no matter how it is made, generates the same boiler plate javascript when the project is used for an HTLM5 based course.

The issue with this javascript, is that both on user input and fill of the box, it converts the values to Number() primitives whenever able. Removing this code so that Captivate boxes set the javascript variables as strings is the only way I could find to publish a course that is meant to accept values like zip, phone number, social security numbers etc, which can begin with leading zeros.

If Captivates bowler plate javascript is allowed to run it will convert zip codes like 04005 to 4005. I am seeing no adverse effects from removing the code and allowing all text input entries to be treated as strings.

Is Captivate aware of this issue? Is there a setting option in Captivate we are missing that would change how this functions? I just am surprised this has not been an issue sooner for more people.

Thank you,

Corbin

PS: Code in question (From CPM.js minified that I prettified. I also bolded issue spots) incase anyone else is in this situation and would like to save the 8 hour headache this caused me

---​This is the function that creates the text entry objects. It has a section for a function it runs on user input that causes the issue.

a.TextInput = function(h, f) {

        function c(b) {

            var c = d.tebData

              , e = c.sc

              , f = void 0;

            e && (f = new a.Shortcut(e.k,1 == e.c,1 == e.s,1 == e.a));

            e = a.getShortCutFromKeyEvent(b);

            if (d.canBeAutoSubmitted || f && f.isSame(e))

                d.canBeAutoSubmitted = 0,

                d.tebcData.keyHandledOnce = !0,

                b.currentTarget && b.currentTarget.parentElement ? a.vTEB(b.currentTarget.parentElement.id) : b.srcElement && (b.srcElement.parentElement && b.srcElement.parentElement.parentElement) && a.vTEB(b.srcElement.parentElement.parentElement.id);

            setTimeout(function() {

                if (d.inputField) {

                    if (0 < c.vn.length) {

                        var b = d.inputField.value;

                        d.m_isNumeric ? b = Number(b) : d.m_isUppercase ? b = b.toUpperCase() : d.m_isLowercase && (b = b.toLowerCase());

                        isNaN(Number(b)) || (b = Number(b));

                        var e = [];

                        e.push(c.vn);

                        svvi(c.vn, b, e)

                    }

                    if (d.retainText)

                        if (a.responsive) {

                            d.getAttribute("txt");

                            for (var f in d.tebcData.txt)

                                d.tebcData.txt = d.inputField.value

                        } else

                            d.tebcData.txt = d.inputField.value

                }

            }, 200)

        }

        function g(a) {

            d.inputField.value.length >= d.m_charLimit && -1 != d.m_charLimit && (d.canBeAutoSubmitted = 1,

            c(a))

        }

        a.TextInput.baseConstructor.call(this, h);

        var d = this;

        this.id = this.getAttribute("id");

        this.type = "text";

        "pw" == this.getAttribute("ft") && (this.type = "password");

        this.expectedStrings = this.getAttribute("exp") || [];

        this.defaultText = this.getAttribute("txt");

        this.accstring = this.getAttribute("accstr");

        this.visible = this.getAttribute("visible");

        this.parentDivName = this.getAttribute("dn");

        var b = a.D[this.parentDivName];

        this.transIn = b.trin;

        this.m_isAutoSubmit = b.as;

        this.m_isLowercase = b.lcase;

        this.m_isUppercase = b.ucase;

        this.m_isNumeric = b.num;

        this.m_hasNoCondition = b.nc;

        this.m_charLimit = b.cl;

        this.canBeAutoSubmitted = 0;

        this.element.parentElement.drawingBoard = this.element.parentElement;

        b = this.getAttribute("b");

        this.bounds = {

            minX: b[0],

            minY: b[1],

            maxX: b[2],

            maxY: b[3]

        };

        b = this.getAttribute("vb");

        this.vbounds = {

            minX: b[0],

            minY: b[1],

            maxX: b[2],

            maxY: b[3]

        };

        this.element.parentElement.bounds = this.vbounds;

        this.args = f;

        this.isDrawn = !1;

        this.inputField = null;

        this.showScroll = this.getAttribute("ss");

        this.fillColor = this.getAttribute("fc");

        this.fillAlpha = this.getAttribute("fa");

        void 0 == this.fillAlpha && (this.fillAlpha = 1);

        this.font = this.getAttribute("font");

        this.showBorder = this.getAttribute("sb");

        this.retainText = this.getAttribute("rtx");

        this.focusLostAction = "";

        a.D[this.id].ofla && (this.focusLostAction = a.D[this.id].ofla);

        this.tebcData = a.D[this.element.id];

        this.tebData = a.D[this.tebcData.id];

        this.element.onkeyup = c;

        this.element.onkeypress = function() {

            var b, c;

            if (window.event)

                b = event.keyCode;

            else if (event.which)

                b = event.which;

            c = String.fromCharCode(b);

            if (b != 😎

                if (d.m_isNumeric) {

                    b = /\d/;

                    b.test(c) || a.preventEventDefault(event)

                } else if (d.m_isUppercase) {

                    b = /[A-Za-z ]/;

                    b.test(c) || a.preventEventDefault(event)

                } else if (d.m_isLowercase) {

                    b = /[a-zA-Z ]/;

                    b.test(c) || a.preventEventDefault(event)

                }

        }

        ;

        this.m_isAutoSubmit && (this.element.onkeyup = g);

        this.tr = this.getAttribute("tr");

        this.sh = this.getAttribute("sh");

        this.re = this.getAttribute("re");

        a.responsive && (this.responsiveCSS = this.getAttribute("css"))

    }

    ;

---This is the function that is involved with filling text inputs via variable values when entering a slide.

a.TextInput.prototype.addIfNeeded = function(h, f) {

        function c(a) {

            return function() {

                a.cp_has_changed = !0

            }

        }

        function g(b, c, d) {

            return function() {

                if ((!d || !d.handled) && c.cp_has_changed)

                    c.cp_has_changed = !1,

                    a.movie.executeAction(b)

            }

        }

        if ((!a.responsive || !this.drawForResponsive(h, f)) && !this.isDrawn) {

            var d = this.id

              , b = this.bounds

              , k = this.type

              , m = "input"

              , e = "";

            this.showScroll && (m = "textarea");

            var i = 0;

            this.tr && (i = a.getAngleFromRotateStr(this.tr));

            var j = this.element.parentElement

              , l = this.vbounds.minY

              , n = this.vbounds.maxY - this.vbounds.minY;

            a.MSIE == a.browser && !this.showBorder && (l -= 1,

            n += 1);

            j.style.left = this.vbounds.minX + "px";

            j.style.top = l + "px";

            j.style.width = this.vbounds.maxX - this.vbounds.minX + "px";

            j.style.height = n + "px";

            this.element.rotateAngle = i;

            this.element.style.left = b.minX - this.vbounds.minX + "px";

            this.element.style.top = b.minY - this.vbounds.minY + "px";

            this.element.style.width = b.maxX - b.minX + "px";

            this.element.style.height = b.maxY - b.minY + 3 + "px";

            this.tr && (a.applyTransform(this.element, this.tr),

            this.element.tr = this.tr);

            this.sh && !this.sh.i && (i = this.sh.a - i,

            a.applyShadow(this.element, this.sh.d * Math.cos(Math.PI * i / 180) + "px " + this.sh.d * Math.sin(Math.PI * i / 180) + "px " + this.sh.b + "px " + a.ConvertRGBToRGBA(this.sh.c, this.sh.o) + (this.sh.i ? " inset" : "")));

            this.element.parentElement.style.webkitBoxReflect = this.re ? "below " + this.re.d + "px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(" + (1 - this.re.s / 100) + ", transparent), to(rgba(255, 255, 255, " + (1 - this.re.p / 100) + ")))" : "unset";

            if ("" == this.element.innerHTML && (this.font && (e = e + " -webkit-appearance:none;" + (" font-family:" + this.font.n + ";"),

            e += "font-size:" + this.font.s + "px;",

            e += "color: " + this.font.c + ";",

            this.m_isUppercase ? e += "text-transform: uppercase;" : this.m_isLowercase && (e += "text-transform: lowercase;"),

            this.font.B && (e += "font-weight:bold;"),

            this.font.u && (e += "text-decoration: underline;"),

            this.font.i && (e += "font-style: italic;"),

            this.showScroll && (e += "resize: none;"),

            e = void 0 != this.showBorder && !this.showBorder ? e + "border:0px;" : e + "border:1px solid;border-top-color:#696969;border-left-color:#696969;border-right-color:#E6E6E6;border-bottom-color:#E6E6E6;",

            e += "border-radius:0px;",

            e = a.device != a.DESKTOP ? e + "padding:0px;" : e + "padding-left:2px;",

            void 0 != this.fillColor && (7 == this.fillColor.length && "#" == this.fillColor[0]) && (i = parseInt(this.fillColor.substr(1, 2), 16),

            j = parseInt(this.fillColor.substr(3, 2), 16),

            l = parseInt(this.fillColor.substr(5, 2), 16),

            e += "background-color: rgba(" + i + ", " + j + ", " + l + ", " + this.fillAlpha + ");")),

            i = b.maxY - b.minY,

            a.MSIE == a.browser && (i += 1),

            this.element.innerHTML += "<" + m + " type='" + k + "'" + (0 == this.enabled ? " disabled " : "") + " aria-label='" + this.accstring + "' id='" + d + "_inputField' style='display:block;left: 0px; top: 0px;position:relative; width:" + (b.maxX - b.minX) + "px; height:" + i + "px;" + e + "'></" + m + ">",

            0 < this.tebData.vn.length)) {

                b = [];

                b.push(this.tebData.vn);

                if ("" != this.defaultText && (this.m_isNumeric || !isNaN(Number(this.defaultText))))

                    this.defaultText = Number(this.defaultText);

                svvi(this.tebData.vn, this.defaultText, b)

            }

            if (this.inputField = document.getElementById(d + "_inputField"))

                this.inputField.setAttribute("tabIndex", a.D[this.tebData.mdi].ti),

                1 === a.D.pref.hsr && a.removeAccessibilityOutline(this.inputField),

                this.inputField.value = this.defaultText,

                d = this.inputField.value.length,

                this.inputField.setSelectionRange && this.inputField.setSelectionRange(0, d),

                -1 != this.m_charLimit && this.inputField.setAttribute("maxlength", this.m_charLimit),

                this.actualParent = this.element.parentElement;

            this.isDrawn = !0;

            this.drawComplete(f);

            0 < this.focusLostAction.length && (this.inputField.onchange = c(this.inputField),

            this.inputField.onblur = g(this.focusLostAction, this.inputField, this.tebData));

            this.transIn && (this.element.parentElement.style.opacity = 0);

            a.isVisible(this) || a._hide(this.parentDivName);

            a.isVisible(this) && this.playEffectsOnStart && ((d = a.D[this.parentDivName].selfAnimationScript) && eval(d),

            this.playEffectsOnStart = !1)

        }

    }

    This topic has been closed for replies.
    Correct answer corbinm75746610

    Lilybiri answered this question for me in this post Re: CP9 JavaScript and Retrieving Numeric Values

    People can use the discussion in that post to get a better understanding of this issue. Marking this as answered. Thanks everyone.

    3 replies

    GilMichelini
    GilMichelini
    Inspiring
    April 14, 2020

    Thank you for helping to solve this issue.

    I opened CPM.js and commented out the lines you identified and it works as expected

    /*
    d.m_isNumeric ? b = Number(b) : d.m_isUppercase ? b = b.toUpperCase() : d.m_isLowercase && (b = b.toLowerCase());
    isNaN(Number(b))
    || (b = Number(b));
    */

    corbinm75746610
    corbinm75746610AuthorCorrect answer
    Inspiring
    September 19, 2017

    Lilybiri answered this question for me in this post Re: CP9 JavaScript and Retrieving Numeric Values

    People can use the discussion in that post to get a better understanding of this issue. Marking this as answered. Thanks everyone.

    G
    Gamashire
    Known Participant
    September 19, 2017

    Hello,

    The major side effect you would get from leaving all entries as String is that everyone who ever coded using those entries as numeric values (a common trait for maths, science, engineering and finance courses, I assume) would lose all the functionality they have based their current work on. This can be a significant loss.

    What we need is the ability to control the variable type that comes out of a text box, allowing you to use them purely as strings, and allowing other people to use those boxes for numbers.

    Also, creating a new type of text box that only accepts numerical values would solve that too in the long run, except that projects built before that update would breakdown upon that Adobe Captivate update. Which is a big deal.

    Lilybiri
    Lilybiri
    Legend
    September 19, 2017

    You can restrict the entry to numbers only:

    corbinm75746610
    corbinm75746610Author
    Inspiring
    September 19, 2017

    Yeah. I think what Gamashire meant was that if the option of accepting only numbers was what drove the JavaScript's decision to convert the value to Number type, then there wouldn't be an issue. Instead it just converts anything it is able to to type Number, no matter what the box accepts as valid input.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices