Input text field Animate CC

[icem71962852]

Hello, kind of desperate here, how can i add an input text field in this new version, i need it so the user can type his name then this name store it and use it in a second stage, but can`t find the way to do it, i've been looking on internet but no success, can you help me?

[UDESCO · Accepted solution]

Input text is not supported in a HTML5 Canvas document. It's only available in AS3/AIR document types.

If you really have to use it in HTML5 canvas, you can try using DOMElement to link an HTML Input text field with your canvas project, such that it appears as an overlay on top of the canvas.

[claudioc27970936]

Hi Nipun,

could you give us an example of code you have to insert to add an HTML Input text field on stage?

Thanks!
Claudio

[Guest]

You would do something like this:

var element = new createjs.DOMElement("idname");
element.htmlElement.onclick = function() {
    alert("I am active");
}

idname is the id of your html element.

When you add htmlElement after the object you have created, you are able to access most of the html properties and methods, I suppose.

Hope that brings you further.

[Squire_Amanda]

How do you use a DOMElement to link an HTML Input text field with the canvas project? I see the code above but I'm not sure where to put it!

[александрб62780587]

I found this way Windows - Components (Ctrl + F7)    Open item User Interface and select component TextInput. I hope this help you.  

[zahidaj13834791]

Hello , your answer helped me. I am new to animate CC. I added the TextInput as advised but the text field is one line. I am not able to find a way to make it multiline text field with scrollbar. Could you please help?

[onlinedev]

As stated above, use the Text Input Component (Window > Components), not an input text field. Here is how to get the value:

If your text input component is named 'nametext' as the Animate instance name, retrieve the value with one of the following:

myVal = $('#nametext').val();

myVal = document.getElementById('nametext').value;

myVal = this.nametext._element._element[0].value;

myVal = document.getElementsByTagName("input")[0].value;

To see a list of available properties, use console.log(this.nametext); In a browser such as Internet Explorer 11, open the developer tools by pressing F12 and check the console for the log. Click on the + to see properties.

[marwaa28541973]

is there is a way to prevent input text field from appearing on top . i used a text input component from adobe animate and the problem appears.

[avid_body16B8]

No because it is a layer that contains the component (s) you added to the stage and that layer (dom_overlay_container) is added at runtime on the top of all other layers. Whatever else you have in your fla is canvas and drawn under the dom_overlay_container.

[ClayUUID]

resdesign  wrote

No because it is a layer that contains the component (s) you added to the stage and that layer (dom_overlay_container) is added at runtime on the top of all other layers.

This answer is right, but for the wrong reason. The when of the DOM overlay container being added is irrelevant. The what of the overlay container is why it's always on top. The DOM overlay container is always on top because, unlike every other Animate object, it's not drawn into Animate's HTML canvas element. It's an entirely separate HTML element that renders above (or with some manual twiddling, below) the canvas, but absolutely cannot be placed within it.