how to get the value from a text input component?

[pbesong]

I have a text input component (since HTML5 doesn't support text input) that i've named "a1".

How do I get the value of that component that the user enters when I click my "check" button?

alert(this.a1.value) does not work.

[ClayUUID · Accepted solution]

Canvas components are HTML entities, not CreateJS stage objects. You address them with document.getElementById("instance name").

[pbesong]

ah that works. Thanks ClayUUID!

The text in my text input is tiny, though. How do I control its size, font, etc? didn't see it in properties.

[ClayUUID]

It's an HTML element. You style it via CSS like any other element--

var bob = document.getElementById("bobBox");

bob.style.color = "red";

bob.style.fontFamily = "courier";

bob.style.fontSize = "24px";

[pbesong]

That makes sense. Thanks again.

[GoryGreg]

I may be doing this wrong (as I'm trying to get my head around components) but when I had to use the following code to get the contents of a text input component...

document.getElementById("inpName").value;

where inpName is the instance name of my text input box. Has the CreateJS code changed slightly?

Also I can't seem to get the styling for the box to work either. Is the above styling code put directly in the components js files generated, creating a CSS file that is dropped on the stage or can it be place directly in Animate like the code above?

I wish there was more videos/tutorials/webinars on Animate CC HTML5 Canvas coding, as I do struggle to find stuff among all the coding examples for ActionScript for Animate CC. I tried watching the AS ones and then typing what I think the JS would be but to novices it is not that easy or obvious. The wealth of knowledge here on this forum is astounding (from people who I know are not connected to Adobe) but I dont think for Animate CC it is being channeled well. It seems all over the place and if the problem is not labelled well by the person asking then it makes searching hard. Maybe Adobe could pay some of you guys for your time to do instructional videos of recurring questions? Unless there is some Animate CC coding genius that works on just the HTML5 coding side that I am missing on YouTube or the like?

Sorry for rant. Feeling a bit frustrated.

Cheers.

[ClayUUID]

Worked fine for me. You aren't trying to access the component before it's had time to initialize, are you?

[GoryGreg]

Thanks Clay. Good to know that components need initialized for future reference. I did like you said on another thread and left it one frame before accessing it.

The styling works but I still have to use .value to get the input text. Nothing major but I like the least amount of code to do something. So if I can get your example working then great.

I have a button (okBtn) on second frame that calls a function to get the input text typed...

this.stop();

this.okBtn.on("click", fGetName);

function fGetName() {

     var name = document.getElementById("inpName").value;

     console.log(name);

}

This works in the console.

If I take out .value I get in the console-

<input type="text" id="inpName" class="ui-textinput" style="display: block; pointer-events: all; box-sizing: border-box; position: absolute; width: 100px; height: 22px; transform-origin: 50px 11px 0px; transform: matrix(1, 0, 0, 1, 342, 251.1);">

Maybe I'm doing the console.log wrong or maybe your example assumed we would add .value?

Cheers.

[ClayUUID]

I don't understand what the problem is.

[GoryGreg]

Yeah, I've probably made it more convoluted than it needs to be.

To get the text in the input text I use

document.getElementById("instance name").value;

where in your example you said

document.getElementById("instance name").

but I am noticing the . at the end of your code, so I'm assuming you left it there to add things like .value or you would have had a ; at the end?

Apologies if I've misread your codes purpose, while wasting your time plus my own. But good learning for me, which I appreciate.

Cheers.

[ClayUUID]

https://forums.adobe.com/people/Gory+Greg  wrote

but I am noticing the . at the end of your code, so I'm assuming you left it there to add things like .value or you would have had a ; at the end?

That's a period. They end sentences. In that post I specifically said that's how you address the component, not retrieve the value of the component. Components have many properties. The value is only one of them.

[GoryGreg]

Ha ha you call them periods and I call them full stops where I come from. Though now I live in Canada I'm getting used to calling them periods. But I get ya now, as you clarified again what the code was aiming at.

So okay, value is a form control property from what I have read up on. Like type, name, form etc are. And they are properties of the text input component.

So 2 possibly silly questions:

1) How can we know (or get a list of) all the different properties that we can retrieve from that component?

2) Do different Animate CC components have different properties that can be retrieved?

And I do appreciate the time you take to reply, as it is helping me make things clearer from the book I'm reading. My go to book is 'JavaScript & jQuery' by Jon Duckett and then take it from there- but reading is okay- doing is how I learn best.

Anyway, I digress.

Cheers

[ClayUUID]

Most of the HTML "components" are just thin wrappers around a native HTML element. The text input component creates an HTML text input element. So look up the documentation for that element to read about its properties.

<input type="text"> - HTML: HyperText Markup Language | MDN

[GoryGreg]

Cheers Clay.

[avid_body16B8]

Maybe put code as quote and it will be set separately or use <pre> and <code> in html to see it as code so there is no confusion. i use quote often so I do not have to go into the html.

[The Artworker]

Where does this styling code go?

Can I put it in with all the JavaScript, or will I need to manually add it to the HTML file every time I publish?

[ClayUUID]

It IS JavaScript, so yes, it goes with the JavaScript.

[The Artworker]

Thanks I've figured that bit out.

Now how do I make the background for the component transparent while keeping the contents (text) visible?

[ClayUUID]

Googling for "html input transparent background", literally the first result:

html - Make Text Input Box Transparent? Should be simple? - Stack Overflow

[onlinedev]

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.