Skip to main content
Inspiring
April 3, 2019
Answered

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

  • April 3, 2019
  • 3 replies
  • 2730 views

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

This topic has been closed for replies.
Correct answer avid_body16B8

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


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.

3 replies

avid_body16B8
Legend
April 3, 2019

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

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

avid_body16B8
Legend
April 3, 2019

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
Legend
April 3, 2019

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.

Inspiring
April 4, 2019

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
Legend
April 4, 2019

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