Highlighted

How do you format an input component for example maxlength in ANCC html5?

Adobe Community Professional ,
Mar 11, 2019

Copy link to clipboard

Copied

I need to limit the length of an input text and maybe add some other formatting. How is this done? The component properties are pretty limited. I know there is a CSS component for formatting and I tried it but to no avail.

I limited the input to numbers only with this code and it works great:

(can't remember where I originally found the example).

//********************* ALLOW ONLY NUMBERS IN INPUT *************************************

if (!this.myInput_change_cbk) {

    function myInput_change(evt) {

        // change value here

        console.log(evt.target.value);

        var regex = /[^0-9]/g;

        evt.target.value = evt.target.value.replace(regex, "");

        // End your custom code

    }

    $("#dom_overlay_container").on("keyup", "#input1", myInput_change.bind(this));

  

    this.myInput_change_cbk = true;

   

}

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi, res.

Use:

setTimeout(function()

{

    dom_overlay_container.children["txt"].maxLength = 5; // "txt" is the instance name

}, 0);

Regards,

JC

Views

247

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

How do you format an input component for example maxlength in ANCC html5?

Adobe Community Professional ,
Mar 11, 2019

Copy link to clipboard

Copied

I need to limit the length of an input text and maybe add some other formatting. How is this done? The component properties are pretty limited. I know there is a CSS component for formatting and I tried it but to no avail.

I limited the input to numbers only with this code and it works great:

(can't remember where I originally found the example).

//********************* ALLOW ONLY NUMBERS IN INPUT *************************************

if (!this.myInput_change_cbk) {

    function myInput_change(evt) {

        // change value here

        console.log(evt.target.value);

        var regex = /[^0-9]/g;

        evt.target.value = evt.target.value.replace(regex, "");

        // End your custom code

    }

    $("#dom_overlay_container").on("keyup", "#input1", myInput_change.bind(this));

  

    this.myInput_change_cbk = true;

   

}

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi, res.

Use:

setTimeout(function()

{

    dom_overlay_container.children["txt"].maxLength = 5; // "txt" is the instance name

}, 0);

Regards,

JC

Views

248

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
Mar 11, 2019 0
Adobe Community Professional ,
Mar 11, 2019

Copy link to clipboard

Copied

I don't understand what the problem is. Just setting the maxlength property on the input field isn't working?

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
Reply
Loading...
Mar 11, 2019 0
Adobe Community Professional ,
Mar 11, 2019

Copy link to clipboard

Copied

I do not see the way to set the maxlength to the input text component.

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
Reply
Loading...
Mar 11, 2019 0
Adobe Community Professional ,
Mar 11, 2019

Copy link to clipboard

Copied

In html I would use:

$("input1").html('<input type="text" maxlength="2">');

or

$("input1").attr('maxlength','2')

but It is not working here in ANCC.

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
Reply
Loading...
Mar 11, 2019 0
Adobe Community Professional ,
Mar 11, 2019

Copy link to clipboard

Copied

resdesign  wrote

In html I would use:

$("input1").html('<input type="text" maxlength="2">');

or

$("input1").attr('maxlength','2')

but It is not working here in ANCC.

Animate's output in canvas mode is HTML, and that's jQuery, which is overkill for something as simple as setting a single DOM attribute.

Where's the code that assigns the key changed event handler in your first post? If that's working, you're already somehow correctly grabbing the DOM reference to that input field. So reuse that reference to do a .maxlength = "5" or whatever.

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
Reply
Loading...
Mar 11, 2019 0
Adobe Community Professional ,
Mar 11, 2019

Copy link to clipboard

Copied

Actually I have a bunch of input texts since this is an educational course.

Isn't jquery automatically loaded with components anyway?

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
Reply
Loading...
Mar 11, 2019 0
Adobe Community Professional ,
Mar 11, 2019

Copy link to clipboard

Copied

Hi, res.

Use:

setTimeout(function()

{

    dom_overlay_container.children["txt"].maxLength = 5; // "txt" is the instance name

}, 0);

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Mar 11, 2019 1
Adobe Community Professional ,
Mar 11, 2019

Copy link to clipboard

Copied

When you say instance, do you mean the instance name of the component? If yes, so far it is not working.

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
Reply
Loading...
Mar 11, 2019 0
Adobe Community Professional ,
Mar 11, 2019

Copy link to clipboard

Copied

Yeah.

Have a look:

animate_cc_html5_canvas_input_max_length.zip - Google Drive

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Mar 11, 2019 0
Adobe Community Professional ,
Mar 11, 2019

Copy link to clipboard

Copied

Well, not sure why it is not working in my fla. Will keep you posted.

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
Reply
Loading...
Mar 11, 2019 0
Adobe Community Professional ,
Mar 12, 2019

Copy link to clipboard

Copied

OK. got it to work. After investigating, the input buttons were not yet initiated so of course it did not work. After placing them off stage on the first frame, it worked.

Thanks again for your continued kindness in sharing your expertise with all of us.

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
Reply
Loading...
Mar 12, 2019 1
Adobe Community Professional ,
Mar 12, 2019

Copy link to clipboard

Copied

This is awesome, res! Glad you manage to get it working.

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Mar 12, 2019 0
Adobe Community Professional ,
Mar 12, 2019

Copy link to clipboard

Copied

For those interested, you can use jquery and CSS to format the input component. answer1 is the instance name of the input component in the example below.

There is no need to use the CSS component to add a style sheet unless you have a lot of formatting to do.

$("#answer1").css({"color": "red","font-size": 24});

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
Reply
Loading...
Mar 12, 2019 2