How do you create a password input field in an HTML5 project?

[_tal_]

Creating a text input field using Components is pretty easy. Unfortunately, its properties don't allow you to change things like the type attribute, so you can't set it to type=password.

You can add a class name to the text input component, and run javascript like:

$(".my-password-field").first().attr("type", "password");

or the equivalent raw javascript code (this is jquery), but you need to do it after the input field has been loaded.  I can run the above code, and it'll work in my browser's dev console, but at that point, the page has already loaded. How do I do it within the Adobe Animate project automatically?

Adding Javascript to the same frame that contains the text field doesn't appear to work, because at that point, the text input field hasn't been loaded yet.

I also tried the standard $(document).ready(), but that didn't work either.

[_tal_]

This:

var checkExist = setInterval(function() {
   if ($(".my-password-field").length) {
      $(".my-password-field").first().attr("type", "password");
      clearInterval(checkExist);
   }
}, 100); // check every 100ms

Source: https://stackoverflow.com/a/16149679/6423456

Seems to work, but is a bit hacky. Is this really the best way to do it?