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

[resdesign]

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;
}

[ClayUUID]

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

[resdesign]

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

[resdesign]

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.

[ClayUUID]

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.

[resdesign]

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

Isn't jquery automatically loaded with components anyway?

[JoãoCésar · Accepted solution]

Hi, res.

Use:

setTimeout(function()
{
    dom_overlay_container.children["txt"].maxLength = 5; // "txt" is the instance name
}, 0);

Regards,

JC

[resdesign]

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

[JoãoCésar]

Yeah.

Have a look:

animate_cc_html5_canvas_input_max_length.zip - Google Drive

[resdesign]

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

[resdesign]

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.

[JoãoCésar]

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

[resdesign]

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});