• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Text entry box code - destroys leading zeros

Community Beginner ,
Sep 19, 2017 Sep 19, 2017

Copy link to clipboard

Copied

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 != 8)

                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)

        }

    }

Views

734

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Beginner , Sep 19, 2017 Sep 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.

Likes

Translate

Translate
Explorer ,
Sep 19, 2017 Sep 19, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 19, 2017 Sep 19, 2017

Copy link to clipboard

Copied

You can restrict the entry to numbers only:

TEBNumbers.png

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 19, 2017 Sep 19, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 19, 2017 Sep 19, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 14, 2020 Apr 14, 2020

Copy link to clipboard

Copied

LATEST

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));
*/

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines