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

[Chemistry guy]

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

[avid_body16B8]

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.

[Chemistry guy]

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?

[avid_body16B8]

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

[Chemistry guy]

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

[avid_body16B8]

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?

[Chemistry guy]

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.

[Chemistry guy]

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."

[avid_body16B8]

Yes. I see it flicker and disappear.

Let me look at your file.

[avid_body16B8 · Accepted solution]

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.

[Chemistry guy]

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

[Chemistry guy]

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?

[avid_body16B8]

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

[avid_body16B8]

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

[avid_body16B8]

Corrected file;

https://drive.google.com/open?id=1xrJFC5TJaI2vyH5I9zFftcLKWYTmXGe2

[Chemistry guy]

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

[avid_body16B8]

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

[avid_body16B8]

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.

[avid_body16B8]

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

[avid_body16B8]

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

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