Forum Discussion

LonTcopp's avatar
LonTcopp
Community Member
3 years ago

Converting input text to a password icon/asterisk as you type?

Hello: can this be done?:  Id like a user to type a password into a box.  As they type, the letter are instantly concerted to small circles or asterisks as happe d when you enter a password in a sit...
storyline 360
Jean-Guy-Boulay's avatar
Jean-Guy-Boulay
Community Member
11 months ago

EDIT: ignore this reply below and JUMP to this part of the thread for a template.


Execute a javascript when the textEntry changes:
var player = GetPlayer();
const password = player.GetVar("textEntry");

  const maskedString = "*".repeat(password.length);
 player.SetVar("textEntry", maskedString);

  • CorporateTra830's avatar
    CorporateTra830
    Community Member
    7 months ago

    I tried this is not working. 

    • Nedim's avatar
      Nedim
      Community Member
      6 months ago

      Try this when the timeline starts:

      var input = document.querySelector('.acc-textinput');

    input.addEventListener("keydown", function () {
        let length = input.value.length;
        input.value = "*".repeat(length);
    });
      • Susan_B_Rice73's avatar
        Susan_B_Rice73
        Community Member
        2 months ago

        Thank Nedim! This variable worked for me. I tweaked the trigger a bit to have the JavaScript execute when the user clicks in the text entry box. Worked that way too. I did notice that if there are multiple text entry fields, this only works in one of them.  

        Jean-Guy-Boulay - I tried your JavaScript too and couldn't get it to work even after ensuring I updated the areas you specified in your comment below. Not sure what I may have done incorrectly. 

    • Jean-Guy-Boulay's avatar
      Jean-Guy-Boulay
      Community Member
      5 months ago

      Really? I just tried the script again and it works fine. Did you set the javascript to execute when the textEntry variable changes? Did you make sure to adjust the "textEntry" to the name of the variable assigned to your text field? eg. In this image I have a textEntry text field with a variable called "badgeNum".


      Sorry for not replying earlier, for some reason I never got notified of this question.