Highlighted

textInput component in HTML5 Canvas application: not appearing and how to put an outline around it and give it focus with Javascript

Explorer ,
Apr 03, 2019

Copy link to clipboard

Copied

I've added a textInput component to a HTML5 Canvas application, and when I published it today, although the box appeared yesterday, it no longer does today. Any ideas as to why that might be?

Also. how do I use Javascript to put an outline around it (inputNumber) and give it focus? The only code I have that relates to it at this point is

var textInput;

setTimeout(function()

{

    textInput = dom_overlay_container.children["inputNumber"];

    textInput.style.fontSize = "42px";

    textInput.style.fontFamily = "'Calibri', cursive, sans-serif";

}, 0);

Thanks for the help.

Mark

Adobe Community Professional
Correct answer by resdesign | Adobe Community Professional

I just added a stop on frame 5 and it shows. I think that you need to do that otherwise it goes to frame 9.

Views

673

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

textInput component in HTML5 Canvas application: not appearing and how to put an outline around it and give it focus with Javascript

Explorer ,
Apr 03, 2019

Copy link to clipboard

Copied

I've added a textInput component to a HTML5 Canvas application, and when I published it today, although the box appeared yesterday, it no longer does today. Any ideas as to why that might be?

Also. how do I use Javascript to put an outline around it (inputNumber) and give it focus? The only code I have that relates to it at this point is

var textInput;

setTimeout(function()

{

    textInput = dom_overlay_container.children["inputNumber"];

    textInput.style.fontSize = "42px";

    textInput.style.fontFamily = "'Calibri', cursive, sans-serif";

}, 0);

Thanks for the help.

Mark

Adobe Community Professional
Correct answer by resdesign | Adobe Community Professional

I just added a stop on frame 5 and it shows. I think that you need to do that otherwise it goes to frame 9.

Views

674

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
Apr 03, 2019 0
Adobe Community Professional ,
Apr 03, 2019

Copy link to clipboard

Copied

Try to add style like this and see if it works. also check out the javascript console.

$("#inputNumber").css({

        "color": "teal",

        "font-size": 18,

        "text-align": "center"

    });

Note: animate adds jquery when you add a 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...
Apr 03, 2019 0
Explorer ,
Apr 03, 2019

Copy link to clipboard

Copied

Thanks. I'm sure that this will be helpful eventually, but for now, when I run the html file after publishing, there's no sign of the textInput box. Where it should be is completely blank. Any ideas why?

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...
Apr 03, 2019 0
Adobe Community Professional ,
Apr 04, 2019

Copy link to clipboard

Copied

I understand but sometimes it is your code that prevents something from showing up.

Have you checked the console to see if there is any error?

Sample :

input text formatting.zip - Box

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...
Apr 04, 2019 0
Explorer ,
Apr 04, 2019

Copy link to clipboard

Copied

First, many thanks for your help. I should have thought about checking the console. There are a slew of similar error messages that look like

Uncaught TypeError: Cannot read property 'css' of null

    at $.(anonymous function).(anonymous function).applyProperties (file:///Users/bishopmark/Documents/Canvas_animations/atoms_glossary_Canvas/atoms_glossary_1/components/sdk/anwidget.js:176:9)

    at $.(anonymous function).(anonymous function).update (file:///Users/bishopmark/Documents/Canvas_animations/atoms_glossary_Canvas/atoms_glossary_1/components/sdk/anwidget.js:161:9)

    at lib.an_TextInput._handleDrawEnd (atoms_glossary_1_Canvas.js:5713)

    at createjs-2015.11.26.min.js:12

    at lib.Stage.b._dispatchEvent (createjs-2015.11.26.min.js:12)

    at lib.Stage.b.dispatchEvent (createjs-2015.11.26.min.js:12)

    at lib.Stage.b.update (createjs-2015.11.26.min.js:13)

    at lib.Stage.b.handleEvent (createjs-2015.11.26.min.js:13)

    at Function.b._dispatchEvent (createjs-2015.11.26.min.js:12)

    at Function.b.dispatchEvent (createjs-2015.11.26.min.js:12)

Removing the only code that relates to the inputText component does not help. I get the same error messages.  Could this be related to something I've done in the publish settings?

thanks again

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...
Apr 04, 2019 0
Adobe Community Professional ,
Apr 04, 2019

Copy link to clipboard

Copied

Another idea. Delete that one and add a new one. Sometimes something quirky happens and I replace the components and it works.

Otherwise, could you post a link to your files or if you have copyright concerns PM me the link?

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...
Apr 04, 2019 0
Explorer ,
Apr 04, 2019

Copy link to clipboard

Copied

I thought of that too, but deleting the textInput component and replacing it didn't help. Here are links.

http://preparatorychemistry.com/atoms_glossary_1_Canvas.html

http://preparatorychemistry.com/atoms_glossary_1_Canvas.js

http://preparatorychemistry.com/atoms_glossary_1_Canvas.fla

I'm converting my old flash applications to HTML5 Canvas. It's a bit of a mess because I've just started the process, and I'm in the try-this-try-that phase. Here's the Flash version.

http://preparatorychemistry.com/Glossary_atoms_1_flash.htm

The new .fla file was made from scratch rather than exporting the old Flash .fla file.

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...
Apr 04, 2019 0
Explorer ,
Apr 04, 2019

Copy link to clipboard

Copied

You see the page with the missing textInput component after clicking the Next button. It should be right below the text that ends with :...terms."

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...
Apr 04, 2019 0
Adobe Community Professional ,
Apr 04, 2019

Copy link to clipboard

Copied

Yes. I see it flicker and disappear.

Let me look at your file.

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...
Apr 04, 2019 0
Adobe Community Professional ,
Apr 04, 2019

Copy link to clipboard

Copied

I just added a stop on frame 5 and it shows. I think that you need to do that otherwise it goes to frame 9.

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...
Apr 04, 2019 0
Explorer ,
Apr 04, 2019

Copy link to clipboard

Copied

Wow...your are awesome. Many thanks. Now on to the next problems.

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...
Apr 04, 2019 1
Explorer ,
Apr 04, 2019

Copy link to clipboard

Copied

I still get some errors in the console. At the risk of overstaying my welcome, do you have any ideas as to why that is?

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...
Apr 04, 2019 0
Adobe Community Professional ,
Apr 04, 2019

Copy link to clipboard

Copied

Not sure. There seems to be an error in the component. Let me look at it and see if I can find why.

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...
Apr 04, 2019 0
Adobe Community Professional ,
Apr 04, 2019

Copy link to clipboard

Copied

OK. This is due to the other input text. Replace it with a new one. The error will go away then.

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...
Apr 04, 2019 0
Adobe Community Professional ,
Apr 04, 2019

Copy link to clipboard

Copied

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...
Apr 04, 2019 0
Explorer ,
Apr 05, 2019

Copy link to clipboard

Copied

Thanks again. There still seems to be a problem. With your corrected file, the following function is not run the first time that the application moves to frame 5 (by clicking on the Next button). If I click the restart button and then the Next button to return to frame 5, the function runs fine. The mystery comes when I duplicate your code in my file, it does something different. The function never runs. The textInput box appears the first time I visit frame 5 but disappears the second time. I replaced the textInput component, but it does the same thing. Odd and maybe just a bit frustrating.

setTimeout(function () {

$("#inputNumber").css({

        "color": "teal",

        "font-size": 42,

        "text-align": "center"

    });

}, 0);

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...
Apr 05, 2019 0
Adobe Community Professional ,
Apr 05, 2019

Copy link to clipboard

Copied

Add an instance off stage of all the text inputs you will target later in frame one and it will work. Sorry I must have deleted them inadvertently.

Each instance will need its own css code. If they are the same then just copy (like below) and change the name in the setTimeout function.

If you have a lot a components you need to target then you could use the css component and make a style sheet.

Hope this helps.

Forget the corrected file. Something weird is happening there.

Example:

setTimeout(function () {

$("#inputNumber").css({

        "color": "teal",

        "font-size": 42,

        "text-align": "center"

    });

   

$("#inputterm").css({

        "color": "teal",

        "font-size": 42,

        "text-align": "center"

    });   

}, 0);

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...
Apr 05, 2019 0
Adobe Community Professional ,
Apr 05, 2019

Copy link to clipboard

Copied

BTW, you need to reset the css in your restart button too.

You could also use the css component if you prefer in which case you will need a style sheet to load with it.

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...
Apr 05, 2019 0
Adobe Community Professional ,
Apr 03, 2019

Copy link to clipboard

Copied

YOu can also restrict your input to only digits like this:

function what_change(evt) {

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

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

          // add any code you need to check the input value


    }

    $("#dom_overlay_container").on("keyup", "#nameofInputtext ", what_change.bind(this));

Change  nameofInputtext to your input instance name

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...
Apr 03, 2019 0
Adobe Community Professional ,
Apr 03, 2019

Copy link to clipboard

Copied

and you can restrict the length of the input like this:

dom_overlay_container.children["imputTextName"].maxLength = 2;

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...
Apr 03, 2019 0